/* Basic reset */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background: #f4f4f4;
    color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Dark mode */
body.dark {
    background: #121212;
    color: #f0f0f0;
}

/* Container width */
header,
section,
#adminPanel {
    width: 100%;
    max-width: 800px;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

header h1.clickable-title {
    cursor: pointer;
}

/* Header buttons container */
.header-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Sections */
section {
    background: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
}

body.dark section {
    background: #1e1e1e;
    border: 1px solid #444;
}

/* File cards */
.card {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 15px;
}

body.dark .card {
    border: 1px solid #555;
}

/* Media */
img, video {
    max-width: 200px;
    display: block;
    margin: 10px 0;
}

audio {
    margin: 10px 0;
}

/* Titles */
.card h3 {
    text-decoration: underline;
    cursor: pointer;
}

/* Descriptions */
.card p {
    text-decoration: none;
    cursor: pointer;
}

/* Inputs */
input, button {
    padding: 6px 10px;
    margin: 5px 5px 5px 0;
    border: 1px solid #ccc;
    background: white;
    color: black;
}

body.dark input,
body.dark button {
    background: #2a2a2a;
    color: white;
    border: 1px solid #555;
}

/* Message box */
.message {
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
}

body.dark .message {
    border: 1px solid #555;
}

/* Hide */
.hidden {
    display: none;
}

/* Modal */
.modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    justify-content:center;
    align-items:center;
    z-index:1000;
    display:none;
}

.modal.show{
    display:flex;
}

.modal img,
.modal video,
.modal embed,
.modal iframe{
    max-width:90%;
    max-height:90%;
    background:white;
}

.close{
    position:absolute;
    top:20px;
    right:30px;
    font-size:24px;
    cursor:pointer;
    color:white;
}

/* Drag & Drop */
.drop-zone{
    border:2px dashed #aaa;
    padding:30px;
    text-align:center;
    margin-bottom:15px;
    cursor:pointer;
    background:#fafafa;
}

body.dark .drop-zone{
    background:#1a1a1a;
    border:2px dashed #555;
}

.drop-zone.dragover{
    border-color:#4CAF50;
    background:#e8ffe8;
}

body.dark .drop-zone.dragover{
    background:#133313;
}

/* Search controls */
.search-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
}

/* PDF card preview in search */
.pdf-card{
    border:1px solid #ccc;
    padding:10px;
    margin:5px 0;
    width:200px;
    text-align:center;
    cursor:pointer;
    background:#f0f0f0;
}

body.dark .pdf-card{
    background:#2a2a2a;
    border:1px solid #555;
}

/* Clickable titles/descriptions */
.clickable{
    cursor:pointer;
    text-decoration: underline; /* only titles if you want, remove for descriptions if needed */
}