/* ============================================================== WebSmile Marketing — app.css Ενιαίο stylesheet όλου του portal (admin + client views). Περιεχόμενα: 1. Root variables (χρώματα) 2. Βασικό reset / typography 3. Topbar & Sidebar (πλοήγηση) 3b. Κοινά utilities: page/card headers, ειδοποιήσεις, βοηθητικό κείμενο 4. Social Posts — view switcher, φίλτρα, grid/list 5. Γενικά: cards, πίνακες, forms, tabs, bulk selection 6. Ημερολόγιο (στάδια 1-2) + πλευρικό drawer προεπισκόπησης 7. Δημόσιο μηνιαίο πλάνο (share.php) + εξωτερικό video 8. Ροή Εργασίας (Social) — πύλη ουρών 9. Google Ads module 10. Admin dashboard — activity feed ============================================================== */ :root{ --purple:#4C2E82; --purple2:#6D3FC7; --pink:#E23F86; --bg:#F4F6F9; --border:#E3E6ED; --text:#1F2430; --muted:#6B7280; --green:#1E9E64; --green-bg:#E6F7EF; --amber:#B7791F; --amber-bg:#FDF3DD; --red:#DC2626; --red-bg:#FCE8E8; --blue:#2563EB; --blue-bg:#E8EFFD; --pink-bg:#FDE8F1; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background:var(--bg);color:var(--text);font-size:14.5px;line-height:1.5; -webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} .topbar{background:var(--purple2);display:flex;align-items:center;justify-content:space-between;padding:12px 20px; box-shadow:0 2px 12px rgba(20,10,50,.12)} .topbar .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:15.5px;letter-spacing:-.01em} .topbar .brand .mark{width:32px;height:32px;border-radius:9px;background:#fff;color:var(--purple2);display:flex;align-items:center;justify-content:center;font-weight:800} .topbar .right{display:flex;align-items:center;gap:14px;color:#fff;font-size:13px} .topbar .avatar{width:32px;height:32px;border-radius:50%;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px} .topbar-left{display:flex;align-items:center;gap:10px} .topbar-profile{display:flex;align-items:center;gap:8px;color:#fff} .avatar-photo{object-fit:cover} .client-switcher{padding:7px 10px;border-radius:8px;border:none;font-size:12.5px;font-weight:700;color:var(--purple2);background:#fff} .btn.ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.4)} main.content.flush{padding:0} .shell{display:flex;min-height:calc(100vh - 55px)} .sidebar{width:252px;flex-shrink:0;background:#fff;border-right:1px solid var(--border);padding:18px 12px} .navlabel{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:16px 12px 6px;font-weight:700} .navitem{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:#374151; font-size:13.5px;font-weight:600;margin-bottom:2px;border-left:3px solid transparent; transition:background .15s,border-color .15s,color .15s} .navitem:hover{background:#f9fafb;border-left-color:#c9b8f2;color:var(--purple2)} .navitem.active{background:rgba(109,63,199,.08);color:var(--purple2);border-left-color:var(--purple2);font-weight:700} .nav-badge{margin-left:auto;background:var(--pink);color:#fff;border-radius:20px;font-size:11px;padding:1px 7px;font-weight:700} .nav-badge.amber{background:var(--amber)} .nav-badge.red{background:var(--red)} .nav-badge.green{background:var(--green)} .nav-badge.lavender{background:#F0EBFB;color:#7C5CBF} /* Sidebar — collapsible group header (π.χ. "Social Media ▾"), μαζί με το .navlabel */ .navgroup-toggle{cursor:pointer;display:flex;justify-content:space-between;align-items:center; background:#F4F6F9;color:#000;font-weight:700;padding:10px 14px;border-radius:6px} .chev{font-size:18px;font-weight:700} /* Social Posts — Grid/List view switcher */ .view-switch{display:flex;border:1px solid var(--border);border-radius:10px;overflow:hidden} .view-switch-btn{padding:8px 14px;font-size:12.5px;font-weight:700;color:var(--muted);text-decoration:none;background:#fff} .view-switch-btn.active{background:var(--purple2);color:#fff} .view-switch-btn:first-child{border-right:1px solid var(--border)} .list-row{cursor:pointer} .list-row:hover{background:var(--bg)} /* Social Posts — Διαθέσιμα Φίλτρα (collapsible, πάντα κλειστό στο άνοιγμα) */ .filters-toggle{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--purple2); font-weight:700;font-size:13px;cursor:pointer;padding:6px 0} .filters-toggle:hover{text-decoration:underline} .filters-panel{display:none;background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:16px} .filters-panel.open{display:block} main.content{flex:1;padding:26px 28px;min-width:0} h1.pagetitle{font-size:24px;margin:0 0 4px;color:var(--purple);letter-spacing:-.01em;font-weight:800} .subtitle{color:var(--muted);font-size:13.5px;margin:0 0 22px} .subtitle-tight{margin-bottom:8px} .subtitle-mb10{margin-bottom:10px} .flex-row-10{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .share-input{flex:1;min-width:260px;padding:8px 10px;border:1px solid var(--border);border-radius:8px} .csv-list-plain{margin:0;padding-left:18px;font-size:13.5px} .internal-note-toggle-sm{font-size:12.5px;display:flex;gap:6px;align-items:center;margin:8px 0} .internal-note-toggle-xs{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--muted);font-weight:600} .ml-auto{margin-left:auto} .card{background:#fff;border-radius:14px;border:1px solid var(--border);padding:20px;margin-bottom:16px; box-shadow:0 1px 3px rgba(20,10,50,.04)} .card h2{font-size:15px;margin:0 0 14px;color:var(--purple);font-weight:700} .row{display:flex;gap:14px;flex-wrap:wrap} .row > .card{flex:1;min-width:180px} .row.mt{margin-top:16px} /* ---- Κοινά layout utilities: page/card headers, ειδοποιήσεις, βοηθητικό κείμενο ---- Αντικαθιστούν επαναλαμβανόμενα inline styles που βρέθηκαν σε πολλά modules (π.χ. clients/client.php, social/*, newsletter/*, reports/*) — μία φορά εδώ, επαναχρησιμοποιούνται παντού. */ .page-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:4px} .page-head .pagetitle{margin:0} .page-actions{display:flex;gap:8px;flex-wrap:wrap} .flex-between{display:flex;justify-content:space-between;align-items:center} .flex-between h2{margin:0} .card-head-wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px} .card-head-wrap h2{margin:0} .card.notice-success{background:var(--green-bg);border-color:#b7e6cc;color:var(--green)} .card.notice-error{background:var(--red-bg);border-color:#f3b9b9;color:var(--red)} .card.notice-error.strong{font-weight:700} .card.notice-success.strong{font-weight:700} .edited-flag{color:var(--muted);font-weight:400;font-size:11.5px} .comment-manage{margin-top:6px;display:flex;gap:10px;align-items:center;font-size:12px} .edit-link{color:var(--purple2);font-weight:700} .hist-link{color:var(--muted)} .btn.ghost.delete-red{color:#C0392B} .edit-comment-textarea{min-height:60px} .edit-comment-actions{margin-top:6px;display:flex;gap:8px} .hist-box{margin-top:8px;padding:10px 12px;background:#F9F8FC;border:1px solid var(--border);border-radius:8px;font-size:12.5px} .hist-date{color:var(--muted)} .mb-6{margin-bottom:6px} .bulk-form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .share-box-panel{flex-basis:100%;margin-top:8px;padding:10px;border:1px solid var(--border);border-radius:8px;background:#fff} .share-label{font-size:12px;font-weight:700;color:var(--muted)} .share-textarea{width:100%;min-height:60px;margin-top:6px;padding:8px;border:1px solid var(--border);border-radius:8px} .template-editor-textarea{min-height:220px;font-family:monospace;font-size:13px} .avatar-row{display:flex;align-items:center;gap:16px;margin-bottom:18px} .avatar-photo-lg{width:64px;height:64px;border-radius:50%;object-fit:cover} .avatar.avatar-lg{width:64px;height:64px;font-size:22px} .auth-wrap{max-width:420px;margin:80px auto;padding:0 16px} .pagetitle.compact{font-size:20px} .col-narrow{width:34px} .cell-right-nowrap{text-align:right;white-space:nowrap} .link-strong-lg{color:var(--purple2);font-weight:800} .text-red.strong{font-weight:700} .archived-note{color:var(--muted);font-size:12px;margin-top:14px} .archived-note a{color:var(--muted);text-decoration:underline} .deadline-note{color:var(--muted);font-size:12.5px;margin-left:10px} .badge.mr-xs{margin-right:4px} .brief-goal-text{font-size:14.5px;line-height:1.7} .color-swatch-input{height:44px} .field.narrow-280{max-width:280px} .pagetitle.mb-20{margin-bottom:20px} .back-link-muted{color:var(--muted);text-decoration:none} .impersonate-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)} .badge.ml-sm{margin-left:6px} .share-box.flex1{flex:1} .cal-kind-filter{display:flex;gap:8px;margin-bottom:12px} .card.notice-info-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;background:var(--blue-bg);border-color:#c9d9fb} .logo-preview-lg{max-height:48px;margin-bottom:10px;display:block} .fav-preview{width:32px;height:32px;margin-bottom:10px;display:block} .field-hint-4{color:var(--muted);font-size:12px;margin-top:4px} .nl-html-textarea{min-height:160px;font-family:monospace;font-size:11px} .cell-center{text-align:center} .platforms-textarea{min-height:180px;font-family:monospace} .filter-form-row{display:flex;gap:10px;align-items:center} .quill-editor-box{background:#fff;border-radius:0 0 8px 8px;min-height:180px} .card.muted-bg{background:var(--bg)} .hint{color:var(--muted);font-size:13px} .hint-tight{color:var(--muted);font-size:12.5px;margin-top:-8px} .hint-spaced{color:var(--muted);font-size:12px;margin-top:10px} .hint-spaced-lg{color:var(--muted);font-size:12px;margin-top:14px} .hint a,.hint-spaced a,.hint-spaced-lg a{color:var(--purple2)} .stat-num{font-size:22px;font-weight:800;color:var(--purple2)} .stat-num-lg{font-size:26px;font-weight:800;color:var(--purple2)} .card-head-pad{padding:18px 22px 14px} .text-muted-pad{color:var(--muted);padding:0 22px 22px} .info-banner{background:var(--blue-bg,#EAF0FE);color:var(--blue,#2B5FD9);padding:10px 22px;font-size:12.5px;font-weight:600} .manager-name{font-size:15px;font-weight:700;margin:4px 0} .link-strong{color:var(--purple2);font-weight:700} .checkbox-inline{display:inline-flex;align-items:center;gap:6px;margin-right:16px;font-weight:400} .field-flex{margin:0;flex:1} .badge-row{display:flex;flex-wrap:wrap;gap:6px} .badge.mt-sm{margin-top:6px} .badge.mr-sm{margin-right:6px} .badge.block-mb{margin-bottom:12px;display:inline-block} .label-md{color:var(--muted);font-size:12.5px} .text-strong{color:var(--text)} .desc-text{margin-top:12px;white-space:pre-line} .btn-chip{margin:2px} .msg-attachments{padding-left:42px;margin-top:6px} .reply-textarea{width:100%;min-height:80px;padding:12px;border:1px solid var(--border);border-radius:10px} .inline-meta{color:var(--muted);font-size:12.5px;margin-left:8px} .card-flex-split-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:flex-start} .text-red{color:var(--red)} .text-green{color:var(--green)} .text-amber{color:var(--amber)} .text-muted{color:var(--muted)} .error-page-body{padding:60px;text-align:center} /* ---- Δημόσιες σελίδες Link Κοινοποίησης (share.php) — standalone HTML, χωρίς login ---- */ .share-header-card{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} .card.notice-info{background:var(--blue-bg);border-color:#c9d9fb} .pre-wrap{margin:0;white-space:pre-wrap} .view-switch-card{display:flex;justify-content:flex-end;padding:8px;margin-bottom:12px} .card-flush{padding:0;overflow:hidden} .card-flush-x{padding:0;overflow-x:auto} .card-actions-row{display:flex;gap:6px;margin-top:10px} .flex1-center.no-underline{text-decoration:none} .badge-corner{position:absolute;top:8px;right:8px;z-index:2} .pd-loading{padding:30px;color:var(--muted);text-align:center} .pd-error{padding:30px;color:var(--red);text-align:center} .reject-error-block{color:var(--red);font-size:13px;margin-bottom:10px} .guest-footer-note{text-align:center;color:var(--muted);font-size:12px} .mb-14{margin-bottom:14px} .mb-8{margin-bottom:8px} .approve-row.mb-8{margin-bottom:8px} .reason-box.mb-8{margin-bottom:8px} .eyebrow.spaced-sm{margin:16px 0 8px} .feed-footnote-sm{text-align:center;color:var(--muted);font-size:11px;margin-top:12px} .empty-box{border:1px solid var(--border);border-radius:10px;padding:16px;background:var(--bg);color:var(--muted)} .post-head-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px} .notice-warning-box{background:var(--amber-bg);border:1px solid #f5dfa0;border-radius:10px;padding:14px;margin-bottom:14px} .ad-notice-lead{font-size:12.5px;margin:6px 0} .section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .section-head h2{margin:0;font-size:15px;color:var(--purple)} .approve-reject-row{display:flex;gap:10px;justify-content:flex-end;padding-top:14px;border-top:1px solid var(--border);margin-top:14px;flex-wrap:wrap} .reject-error-note{color:var(--red);font-size:12.5px;margin:0 0 6px} .label-note{font-weight:400;color:var(--muted)} .inline-form{display:inline} .status-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px} .status-row form{display:flex} .actions-inline{display:flex;gap:6px;flex-wrap:wrap} .divider-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)} .divider-block h3{margin:0 0 10px;font-size:15px} .totp-qr-box{display:flex;justify-content:center;padding:16px;background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:14px;max-width:260px} .totp-manual-key{display:block;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:15px;letter-spacing:.05em;text-align:center;margin-top:6px} .recovery-codes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:12px} .recovery-code-chip{background:#fff;border:1px solid var(--border);border-radius:6px;padding:8px 10px;text-align:center;font-size:13.5px;font-weight:700;letter-spacing:.03em} .cell-strong{font-weight:700} .hidden{display:none!important} .page-head.spaced{margin-bottom:14px} .page-head.spaced-lg{margin-bottom:16px} .card-slim{padding:12px 16px;margin-bottom:16px} .card-flex-split{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px} .card.notice-warning{background:var(--amber-bg);border-color:#f5dfa0} .card.notice-warning h2{color:var(--amber);margin-top:0} .eyebrow{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em} .label-sm{font-size:12px;color:var(--muted)} .value-lg{font-size:15px} .text-right{text-align:right} .meta-block{color:var(--muted);font-size:11.5px;margin-top:8px} .caption.hashtags{color:var(--purple2);margin-top:10px} .caption.hashtags-tight{color:var(--purple2);margin-top:8px} .btn-block{width:100%;justify-content:center;margin-bottom:8px} .btn-block.no-mb{margin-bottom:0} .btn-block.dark{background:#111318} .btn-full-right{width:100%;text-align:right;display:block} .btn.ghost.danger-text{color:var(--red)} .muted-cell{color:var(--muted)} .hint-tight-sm{color:var(--muted);font-size:12px;margin-top:-8px} .hint-lg{color:var(--muted);font-size:13.5px} .mt-6{margin-top:6px} .mt-8{margin-top:8px} .mt-10{margin-top:10px} .mt-14{margin-top:14px} .mt-16{margin-top:16px} .mt-12{margin-top:12px} .mt-18{margin-top:18px} .field.no-mb{margin-bottom:0} .field.full-col{grid-column:1/-1} .field.m0{margin:0} .field.spaced-top{margin:10px 0 0} .field.boxed{background:var(--bg);padding:14px;border-radius:10px;margin-top:18px} .hint.tight-top{margin:-4px 0 8px} .hint.spaced-both{margin:4px 0 10px} .ext-video-list{margin-top:12px;display:flex;flex-direction:column;gap:12px} .pf-extvideo-row{border:1px solid var(--border);border-radius:8px;padding:10px;background:#fff} .media-fallback-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg);font-size:26px} .media-fallback-icon.sm{font-size:22px} .media-ext-badge{position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:2px 6px;border-radius:6px} .cover-options-row{display:flex;gap:14px;flex-wrap:wrap} .media-sortable-item.pending{cursor:default} .placeholder-text{color:var(--muted)} .mb-28{margin-bottom:28px} .nowrap{white-space:nowrap} .m0{margin:0} .filter-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px} .pill-count{background:rgba(0,0,0,.08);border-radius:999px;padding:1px 7px;font-size:11px} .filter-select{padding:9px 12px;border-radius:10px;border:1.5px solid var(--border);min-width:200px} .client-group-title{font-size:16px;margin-bottom:10px} .reports-table{width:100%;border-collapse:collapse;font-size:13.5px} .reports-table th{padding:6px 8px;text-align:right} .reports-table td{padding:10px 8px;border-top:1px solid var(--border)} .pdf-modal-overlay{display:none;position:fixed;inset:0;background:rgba(17,24,39,.6);z-index:200;align-items:center;justify-content:center;padding:20px} .pdf-modal-overlay.open{display:flex} .pdf-modal-box{background:#fff;border-radius:14px;width:100%;max-width:900px;height:88vh;display:flex;flex-direction:column;overflow:hidden} .pdf-modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)} .pdf-modal-title{font-size:14px} .pdf-modal-frame{flex:1;border:none;width:100%} .comment-textarea{width:100%;min-height:70px;padding:12px;border:1px solid var(--border);border-radius:10px} .internal-note-toggle{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;color:var(--muted);font-weight:600} .title-lg{font-size:16px;font-weight:800} .subtext{color:var(--muted);font-size:12.5px;margin-top:6px} .subtext-tight{color:var(--muted);font-size:12.5px;margin-top:2px} .preview-toolbar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap} .nl-preview-wrap{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg);max-width:100%;margin:0 auto;transition:max-width .2s ease} .nl-preview-wrap.mobile{max-width:390px} .nl-preview-frame{width:100%;height:640px;border:0;display:block} .nl-info-box{background:var(--blue-bg,#eef2fd);border:1px solid #c9d9fb;border-radius:8px;padding:10px 14px;margin-bottom:10px;font-size:13px} .report-link-input{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;box-sizing:border-box;margin-bottom:8px} .pill-row-mb{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} .report-row{display:flex;align-items:center;justify-content:space-between;padding:13px 4px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px} .report-row-left{display:flex;align-items:center;gap:12px} .report-icon{width:38px;height:38px;border-radius:9px;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:16px} .report-title-row{font-weight:700;font-size:14px} .notice-lead{font-size:13px;margin-top:-6px} .comment-post-title{margin:10px 0 2px;font-size:16px} .scheduled-note{color:var(--muted);font-size:12.5px;margin:0 0 16px} .approve-actions-row{display:flex;gap:10px;margin-bottom:8px} .flex-1{flex:1} .btn-full{width:100%;justify-content:center} .flex1-center{flex:1;justify-content:center} .mb-16{margin-bottom:16px} .rf-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} .rf-label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px} .rf-input-full{width:100%} .rf-field-block{margin-bottom:18px} .rf-file-note{font-size:12.5px;color:var(--muted);margin-bottom:6px} .rf-file-hint{font-size:11.5px;color:var(--muted);margin-top:4px} .rf-actions{display:flex;gap:8px;justify-content:flex-end} .card.notice-error-outline{border-color:var(--red);color:var(--red)} .card.notice-warning-outline{border-color:var(--amber);color:var(--amber)} .reject-error{color:var(--red);font-size:12.5px;margin:8px 0 4px} .comment-actions-row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px} .eyebrow.spaced{margin:20px 0 10px} .feed-footnote{text-align:center;color:var(--muted);font-size:11.5px;margin-top:16px} .btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:9px;background:var(--purple2);color:#fff; font-size:13px;font-weight:700;border:none;transition:background .15s,transform .1s,box-shadow .15s;box-shadow:0 1px 2px rgba(20,10,50,.08)} .btn:hover{background:var(--purple);transform:translateY(-1px);box-shadow:0 4px 10px rgba(76,46,130,.25)} .btn:active{transform:translateY(0)} .btn.pink{background:var(--pink)} .btn.pink:hover{background:#C42D6E;box-shadow:0 4px 10px rgba(226,63,134,.3)} .btn.ghost{background:none;color:var(--purple2);border:1px solid var(--border);box-shadow:none} .btn.ghost:hover{background:#f9fafb;transform:none;box-shadow:none} .btn.ghost.danger{color:var(--red);border-color:var(--red)} .btn.green{background:var(--green)} .btn.green:hover{background:#178556} .btn.red{background:var(--red)} .btn.red:hover{background:#B91C1C} .btn.sm{padding:6px 11px;font-size:12px} .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px} .toolbar input, .toolbar select{padding:9px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:#fff;transition:border-color .15s} .toolbar input:focus, .toolbar select:focus{outline:none;border-color:var(--purple2)} .spacer{flex:1} table{width:100%;border-collapse:collapse} th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--border);font-size:13.5px} th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;font-weight:700} tbody tr{transition:background .12s} tbody tr:hover{background:#fafafc} .badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700} .badge.green{background:var(--green-bg);color:var(--green)} .badge.amber{background:var(--amber-bg);color:var(--amber)} .badge.red{background:var(--red-bg);color:var(--red)} .badge.blue{background:var(--blue-bg);color:var(--blue)} .badge.grey{background:#eef0f4;color:var(--muted)} .badge.purple{background:#EDE7FB;color:var(--purple2)} .pill-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px} .pill-tab{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:11px 18px;font-size:14px;font-weight:700;color:var(--muted);transition:border-color .15s,color .15s} .pill-tab:hover{border-color:var(--purple2);color:var(--purple2)} .pill-tab .count{background:#eef0f4;color:var(--text);border-radius:999px;font-size:12px;font-weight:800;padding:2px 10px} .pill-tab.active{background:var(--purple2);color:#fff;border-color:var(--purple2)} .pill-tab.active:hover{color:#fff} .pill-tab.active .count{background:rgba(255,255,255,.25);color:#fff} .masonry{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:35px} .masonry-item{width:100%} .creative-card{height:100%;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:0 2px 6px rgba(20,20,40,.04);transition:transform .15s,box-shadow .15s} .creative-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(60,40,120,.14)} .creative-card .media-thumb{position:relative;background:linear-gradient(135deg,var(--purple2),var(--pink));display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;overflow:hidden;cursor:pointer} .creative-card .media-thumb img,.creative-card .media-thumb video,.creative-card .media-thumb iframe{width:100%;height:100%;object-fit:cover;display:block;border:0} .creative-card .media-thumb .placeholder-ic{font-size:34px;color:#fff;padding:40px 0} .creative-card .media-thumb .eyebrow{position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;text-transform:uppercase;background:rgba(0,0,0,.45);color:#fff;padding:4px 10px;border-radius:20px;z-index:2} .creative-card .media-thumb .status-chip{position:absolute;top:12px;right:12px;z-index:2;font-size:11px;font-weight:800;padding:5px 12px;border-radius:20px} .creative-card .media-thumb .play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:34px;z-index:1} .creative-card .foot{padding:14px 16px} .creative-card .foot .title{font-weight:800;font-size:14.5px;margin-bottom:4px} .creative-card .foot .meta{color:var(--muted);font-size:12px} .creative-card .foot .meta.mt-4{margin-top:4px} .field{margin-bottom:14px} .field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:600} .field input:not([type=checkbox]),.field select,.field textarea{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:8px;font-size:13.5px;font-family:inherit} .field textarea{min-height:110px;resize:vertical} .fields-2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .steps{display:flex;align-items:center;gap:0;margin-bottom:18px;flex-wrap:wrap} .step{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted);padding:8px 12px;border-radius:20px;background:#eef0f4;margin:2px} .step.done{background:var(--green-bg);color:var(--green)} .step.current{background:var(--blue-bg);color:var(--blue)} .detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px} .content-box{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px 24px;margin-top:22px} .content-box .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .content-box .hd h2{margin:0;font-size:16px;color:var(--purple)} .content-box p.caption{font-size:16px;line-height:1.85;white-space:pre-line} .share-box{background:var(--bg);border:1px dashed var(--purple2);border-radius:10px;padding:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap} .share-box input{flex:1;min-width:220px;border:1px solid var(--border);border-radius:8px;padding:9px 10px;font-size:12.5px;background:#fff} .share-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap} .client-logo-row{display:flex;gap:16px;align-items:center;margin-bottom:16px} .client-logo-preview{width:64px;height:64px;border-radius:10px;object-fit:cover;border:1px solid var(--border)} .client-logo-placeholder{width:64px;height:64px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;text-align:center;border:1px dashed var(--border)} .comment-lg{padding:14px 0;border-bottom:1px solid var(--border)} .comment-lg .who-row{display:flex;align-items:center;gap:10px;margin-bottom:6px} .comment-lg .who2{width:32px;height:32px;border-radius:50%;background:var(--purple2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px} .comment-lg .who2.client{background:var(--pink)} .comment-lg .name{font-weight:800;font-size:13.5px} .comment-lg .time{color:var(--muted);font-size:11.5px} .comment-lg .txt2{font-size:14.5px;line-height:1.6;padding-left:42px} .badge-line{margin-left:42px;font-size:13.5px;font-weight:700;padding:8px 12px;border-radius:8px;display:inline-block;max-width:calc(100% - 42px)} .badge-line.approved{background:var(--green-bg);color:var(--green)} .badge-line.rejected{background:var(--red-bg);color:var(--red);display:block} .badge-line.rejected .reason-text{display:block;font-weight:500;font-size:12.5px;margin-top:4px;color:#A83232} .badge-line.resend{background:var(--blue-bg);color:var(--blue)} .impersonate-banner{ background:var(--amber);color:#fff;font-weight:700;font-size:13px; padding:9px 16px;text-align:center; display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap; } .impersonate-banner a{color:#fff;text-decoration:underline;font-weight:700} .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--purple),var(--purple2))} .login-card{background:#fff;border-radius:16px;padding:36px;width:100%;max-width:380px;box-shadow:0 20px 50px rgba(0,0,0,.25)} .login-card .mark{width:52px;height:52px;border-radius:14px;background:var(--purple2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;margin:0 auto 14px} .login-card h1{text-align:center;font-size:18px;color:var(--purple);margin:0 0 4px} .login-card .sub{text-align:center;color:var(--muted);font-size:12.5px;margin-bottom:22px} .login-card .btn{width:100%;justify-content:center;margin-top:6px;padding:11px} .login-card .error{background:var(--red-bg);color:var(--red);border-radius:8px;padding:10px 12px;font-size:12.5px;margin-bottom:14px} .hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px} .hub-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;text-align:center; transition:transform .15s,box-shadow .15s,border-color .15s;box-shadow:0 1px 3px rgba(20,10,50,.04)} .hub-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(60,40,120,.14);border-color:var(--purple2)} .hub-card .ic{font-size:34px;margin-bottom:10px} .hub-card .title{font-weight:800;font-size:15px;margin-bottom:6px} .empty{text-align:center;padding:50px 20px;color:var(--muted)} .empty .ic{font-size:34px;margin-bottom:10px} /* ---- Media slider (single/carousel) ---- */ .slider{position:relative;border-radius:16px;overflow:hidden;background:#000;max-width:520px;width:100%;margin:0 auto;transition:max-width .25s ease} .slider .slides{position:relative} .slider .slide{display:none} .slider .slide.active{display:block} .slider .slide img,.slider .slide video{width:100%;height:auto;display:block;max-height:80vh} .slider .arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%; background:rgba(255,255,255,.92);border:none;font-size:18px;font-weight:800;color:var(--purple2);z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.2)} .slider .arrow.left{left:12px} .slider .arrow.right{right:12px} .slider .counter{position:absolute;bottom:12px;right:14px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:700;padding:4px 11px;border-radius:20px;z-index:5} .slider .dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:5} .slider .dots .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .15s} .slider .dots .dot.active{background:#fff} /* ---- Phone mockup for Reels/Stories/Video (9:16) ---- */ .phone-mock{width:230px;margin:0 auto;background:#111;border-radius:32px;padding:10px;box-shadow:0 12px 30px rgba(0,0,0,.25)} .phone-mock .screen{position:relative;width:100%;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000} .phone-mock video{width:100%;height:100%;object-fit:cover;display:block} .phone-mock .notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:60px;height:6px;border-radius:4px;background:#000;z-index:3} /* ---- Rejection reason box ---- */ .reason-box{display:none;margin-top:10px} .reason-box.open{display:block} .reason-box textarea{width:100%;min-height:70px;padding:10px;border:1px solid var(--red);border-radius:8px;font-size:13.5px} /* ---- Internal / private notes (staff only, yellow) ---- */ .comment-lg.internal{background:#FFFBEA;border:1px solid #FCE588;border-radius:10px;padding:10px 12px;margin-bottom:6px} .comment-lg.internal .txt2{color:#7A5B00} .internal-flag{display:inline-block;background:#FCE588;color:#7A5B00;font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px;margin-left:6px;vertical-align:middle} /* ---- Tabs (π.χ. καρτέλα πελάτη) — ΙΔΙΟ pill-style με τα φίλτρα καταστάσεων παντού ---- */ .tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px} .tabbtn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:999px; padding:11px 18px;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s,background .15s} .tabbtn:hover{border-color:var(--purple2);color:var(--purple2)} .tabbtn.active{background:var(--purple2);color:#fff;border-color:var(--purple2)} .settings-collapse{display:none;padding-left:14px} .settings-collapse.open{display:block} .navitem.sm{font-size:12.5px;padding:8px 10px;font-weight:600} /* ---- Bulk selection (Social Posts list) ---- */ .masonry-item{position:relative} .card-select{position:absolute;top:10px;left:10px;z-index:6;background:rgba(255,255,255,.92);border-radius:6px;padding:5px;display:flex;cursor:pointer} .card-select input{width:18px;height:18px;margin:0;cursor:pointer} .bulk-bar{position:sticky;top:8px;z-index:40;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--purple2); box-shadow:0 8px 24px rgba(76,46,130,.15);border-radius:12px;padding:12px 16px;margin-bottom:18px;flex-wrap:wrap; opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .15s,transform .15s} .bulk-bar.open{opacity:1;pointer-events:auto;transform:translateY(0)} .bulk-bar #bulkCount{font-weight:800;color:var(--purple);font-size:13.5px} /* ---- Ημερολόγιο ---- */ .cal-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap} .cal-toolbar .month-label{font-size:17px;font-weight:800;color:var(--purple);min-width:170px;text-align:center} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .cal-head{font-size:11px;text-transform:uppercase;color:var(--muted);text-align:center;padding:6px 0;font-weight:700} .cal-cell{min-height:96px;border:1px solid var(--border);border-radius:8px;padding:6px;background:#fff;font-size:11px} .cal-cell.other{background:#fafafa;color:#c7cad1} .cal-cell .daynum{font-weight:700;color:var(--muted);margin-bottom:4px;font-size:12px} .cal-cell.today{border-color:var(--purple2);border-width:2px} .chip{display:block;border-radius:6px;padding:3px 6px;margin-bottom:3px;font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none} .chip.social{background:#EAF1FF;color:#2354C9} .chip.newsletter{background:#FCEFFA;color:#A32E8E} @media (max-width:880px){ .cal-grid{grid-template-columns:repeat(7,minmax(70px,1fr));overflow-x:auto} .cal-cell{min-height:70px} } .hamburger-btn{display:none;background:none;border:none;color:#fff;font-size:20px;padding:4px 8px;cursor:pointer} .sidebar-overlay{display:none} @media (max-width:880px){ .hamburger-btn{display:block} .topbar-username{display:none} .brand-text{display:none} .shell{display:block} .sidebar{position:fixed;top:0;left:0;height:100vh;z-index:60;transform:translateX(-105%);transition:transform .2s;box-shadow:0 0 30px rgba(0,0,0,.2);overflow-y:auto} .sidebar.open{transform:translateX(0)} .sidebar-overlay.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55} main.content{padding:16px} .detail-grid{grid-template-columns:1fr} .fields-2{grid-template-columns:1fr} h1.pagetitle{font-size:20px} .steps{gap:4px} .step{font-size:11px;padding:6px 9px} } @media (max-width:520px){ .row > .card{min-width:100%} .pill-tab{padding:9px 14px;font-size:13px} .masonry{grid-template-columns:1fr} } /* Πίνακες: οριζόντιο scroll αντί να "σφίγγουν" σε μικρές οθόνες */ .card:has(table){overflow-x:auto} table{min-width:480px} /* ---- Drag & drop media reorder ---- */ .media-sortable{display:flex;flex-wrap:wrap;gap:12px;padding:14px;background:var(--bg);border:1px dashed var(--border);border-radius:10px} .media-sortable-item{position:relative;width:140px;height:140px;border-radius:10px;overflow:hidden;border:2px solid var(--border);cursor:grab;background:#000} .media-sortable-item.dragging{opacity:.35} .media-sortable-item img,.media-sortable-item video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .media-sortable-item .del-btn{position:absolute;top:4px;right:4px;z-index:2;width:26px;height:26px;border-radius:50%;background:rgba(220,38,38,.9);color:#fff;border:none;font-size:13px;font-weight:800;line-height:1;cursor:pointer} .media-sortable-item .zoom-btn{position:absolute;bottom:4px;right:4px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--purple2);border:none;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center} .media-sortable-item .edit-btn{position:absolute;bottom:4px;left:4px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--purple2);border:none;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center} .ext-edit-panels{display:flex;flex-direction:column;gap:10px;margin-top:12px} .ext-edit-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .ext-edit-panel-title{font-size:12.5px;font-weight:700;color:var(--purple2)} .ext-edit-current-thumb{width:60px;height:60px;object-fit:cover;border-radius:8px;border:1px solid var(--border);margin-top:6px} /* ---- Cover picker (κλικ σε όλη την εικόνα, χωρίς φακό) ---- */ .cover-option{position:relative;width:140px;height:140px;border-radius:10px;overflow:hidden;border:3px solid var(--border);cursor:pointer} .cover-option img,.cover-option video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .cover-option .cover-check{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--green); display:none;align-items:center;justify-content:center;font-weight:900;font-size:14px} .cover-option.selected{border-color:var(--purple2)} .cover-option.selected .cover-check{display:flex;background:var(--purple2);color:#fff} /* ---- Lightbox (μεγέθυνση thumbnail) ---- */ .lightbox-overlay{display:none;position:fixed;inset:0;background:rgba(10,10,15,.85);z-index:500;align-items:center;justify-content:center;padding:30px} .lightbox-overlay.open{display:flex} .lightbox-overlay img,.lightbox-overlay video{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.4)} .lightbox-overlay .lb-close{position:absolute;top:20px;right:26px;background:rgba(255,255,255,.15);color:#fff;border:none;width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer} /* ---- Audio briefs ---- */ .audio-rec-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap} .audio-rec-status{font-size:12px;color:var(--muted);font-weight:600} .comment-lg audio{width:100%;max-width:320px;margin-top:6px} /* ================================================================ ΗΜΕΡΟΛΟΓΙΟ — Στάδιο 1: stat-strip, ledger κουκίδες, overflow chips, πλευρικό drawer προεπισκόπησης (post_detail.php) ================================================================ */ /* Stat-strip πάνω από το ημερολόγιο */ .cal-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px} .cal-stat{display:block;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 16px; border-top:3px solid var(--border);text-decoration:none;transition:box-shadow .15s,border-color .15s,transform .1s} .cal-stat:hover{box-shadow:0 4px 12px rgba(20,10,50,.08);transform:translateY(-1px)} .cal-stat .k{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.02em} .cal-stat .v{font-size:26px;font-weight:800;color:var(--purple);margin-top:2px} .cal-stat--amber{border-top-color:var(--amber)} .cal-stat--green{border-top-color:var(--green)} .cal-stat--red{border-top-color:var(--red)} .cal-stat--grey{border-top-color:#9CA3AF} .cal-stat--active{box-shadow:0 0 0 2px var(--purple2) inset} .cal-filter-hint{font-size:12.5px;color:var(--muted);margin:-8px 0 16px} .cal-filter-hint a{color:var(--purple2);font-weight:700} /* Πάνω μέρος κελιού: αριθμός ημέρας + ledger κουκίδες κατάστασης */ .cal-daytop{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:4px} .cal-ledger{display:flex;gap:3px;flex-wrap:wrap} .cal-ledger i{width:6px;height:6px;border-radius:50%;display:block} /* Το chip είναι πλέον