/**
 * WOH Caloocan SMS — Plugin Styles
 * Extends the wohcaloocan design tokens
 */

/* Import wohcaloocan base if not already loaded */
:root {
    --woh-primary:       #10B981;
    --woh-primary-hover: #059669;
    --woh-bg:            #f3f4f6;
    --woh-surface:       #ffffff;
    --woh-text:          #1f2937;
    --woh-text-muted:    #6b7280;
    --woh-border:        #e5e7eb;
    --sidebar-width:     260px;
    --topbar-height:     64px;
}

/* ── Ensure base wohcaloocan styles are present ───────────────── */
body.woh-app-body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: var(--woh-bg);
    color: var(--woh-text);
    overflow-x: hidden;
}

.woh-app-container {
    display: flex;
    min-height: calc(100vh - var(--topbar-height));
    padding-top: var(--topbar-height);
}

.woh-main { flex: 1; min-width: 0; }
.woh-content { padding: 1.5rem; max-width: 1400px; margin: 0 auto; animation: fadeIn 0.3s ease-in-out; }

.woh-topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--topbar-height);
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--woh-border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem; z-index: 50;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}

.topbar-left  { display:flex; align-items:center; gap:1rem; }
.topbar-right { display:flex; align-items:center; gap:.5rem; }
.topbar-brand { display:flex; align-items:center; gap:.75rem; font-weight:600; font-size:1.125rem; }
.topbar-logo  { height:32px; width:auto; }

.btn-icon {
    background:none; border:none; cursor:pointer;
    color:var(--woh-text-muted); padding:.5rem; border-radius:6px;
    display:inline-flex; align-items:center; justify-content:center; transition:background .2s;
}
.btn-icon:hover { background:var(--woh-bg); color:var(--woh-text); }

/* User Dropdown */
.user-dropdown { position:relative; }
.user-dropdown-btn {
    background:none; border:none; display:flex; align-items:center;
    gap:.75rem; cursor:pointer; padding:.5rem; border-radius:6px; transition:background .2s;
}
.user-dropdown-btn:hover { background:var(--woh-bg); }
.user-dropdown-btn .avatar { width:32px; height:32px; border-radius:50%; }
.user-dropdown-btn .user-name { font-weight:500; font-size:.875rem; display:none; }
@media (min-width:768px) { .user-dropdown-btn .user-name { display:block; } }

.dropdown-menu {
    position:absolute; top:100%; right:0; background:var(--woh-surface);
    border:1px solid var(--woh-border); border-radius:6px;
    box-shadow:0 10px 15px -3px rgba(0,0,0,.1);
    min-width:160px; padding:.5rem 0; display:none; margin-top:.5rem;
}
.dropdown-menu.show { display:block; animation:fadeInDown .2s ease-out; }
.dropdown-item {
    display:block; padding:.5rem 1rem; color:var(--woh-text);
    text-decoration:none; font-size:.875rem; background:none;
    border:none; width:100%; text-align:left; cursor:pointer;
}
.dropdown-item:hover { background:var(--woh-bg); }
.dropdown-divider { height:1px; background:var(--woh-border); margin:.5rem 0; }
.text-danger { color:#dc2626; }

/* Sidebar */
.sidebar-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,.4);
    backdrop-filter:blur(4px); z-index:35; display:none; opacity:0; transition:opacity .3s ease;
}
.sidebar-backdrop.show { display:block; opacity:1; }

.woh-sidebar {
    position:fixed; top:var(--topbar-height); bottom:0;
    left:calc(-1 * var(--sidebar-width)); width:var(--sidebar-width);
    background:var(--woh-surface); border-right:1px solid var(--woh-border);
    overflow-y:auto; transition:left .3s ease; z-index:40;
}
.woh-sidebar.open { left:0; }

.sidebar-nav { padding:1.5rem 1rem; display:flex; flex-direction:column; gap:.25rem; }

.sidebar-link {
    display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem;
    color:var(--woh-text-muted); text-decoration:none; border-radius:6px;
    font-family: 'Inter', -apple-system, sans-serif; font-weight:500; font-size:16px; transition:all .2s;
}
.sidebar-link svg { width:20px; height:20px; }
.sidebar-link:hover { background:var(--woh-bg); color:var(--woh-text); }
.sidebar-link.active { background:var(--woh-primary); color:white; }

.sidebar-group {
    list-style:none; font-size:.75rem; text-transform:uppercase; font-weight:600;
    color:#9ca3af; margin-top:1.5rem; margin-bottom:.5rem;
    padding-left:1rem; letter-spacing:.05em;
}

@media (min-width:1024px) {
    .woh-sidebar { left:0; }
    .woh-main { margin-left:var(--sidebar-width); }
    #woh-sms-sidebar-toggle { display:none; }
}

/* Progress Bar */
#woh-progress-bar {
    position:fixed; top:0; left:0; height:3px;
    background:var(--woh-primary); z-index:9999;
    transition:width .3s ease; width:0;
    border-top-right-radius:3px; border-bottom-right-radius:3px;
}

/* Cards */
.card { transition:transform .2s, box-shadow .2s; }
.card:hover { transform:translateY(-2px); box-shadow:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); }

/* Buttons */
.btn-primary {
    background:linear-gradient(135deg, var(--woh-primary) 0%, #047857 100%);
    color:white; box-shadow:0 4px 6px -1px rgba(16,185,129,.4); transition:all .3s ease;
}
.btn-primary:hover { box-shadow:0 10px 15px -3px rgba(16,185,129,.5); transform:translateY(-1px); }

/* Form inputs focus */
input:focus, select:focus, textarea:focus {
    outline:none; border-color:var(--woh-primary) !important;
    box-shadow:0 0 0 3px rgba(16,185,129,.1);
}

/* Modal */
.woh-modal-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,.35);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    z-index:1000; display:none; align-items:center; justify-content:center;
    padding:1.5rem; opacity:0; transition:opacity .3s ease;
}
.woh-modal-backdrop.show { display:flex; opacity:1; }

.woh-modal-card {
    background:var(--woh-surface); width:100%;
    max-height:calc(100vh - 100px); border-radius:12px;
    box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
    display:flex; flex-direction:column; overflow:hidden;
    transform:translateY(20px); transition:transform .3s ease;
}
.woh-modal-backdrop.show .woh-modal-card { transform:translateY(0); }

.woh-modal-header {
    padding:1.25rem 1.5rem; border-bottom:1px solid var(--woh-border);
    display:flex; justify-content:space-between; align-items:center;
}
.woh-modal-header h2 { margin:0; font-size:1.15rem; font-weight:700; }
.woh-modal-close { background:none; border:none; cursor:pointer; font-size:1.5rem; color:var(--woh-text-muted); line-height:1; }
.woh-modal-body { padding:1.5rem; overflow-y:auto; }
.woh-modal-footer {
    padding:1rem 1.5rem; border-top:1px solid var(--woh-border);
    display:flex; justify-content:flex-end; gap:.75rem;
}

/* woh-tx-form inside modal body */
.woh-tx-form { display:flex; flex-direction:column; gap:1rem; }
.woh-tx-field label { display:block; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--woh-text-muted); margin-bottom:.35rem; }
.woh-tx-field input, .woh-tx-field select, .woh-tx-field textarea {
    width:100%; box-sizing:border-box; padding:.7rem .85rem;
    border:1.5px solid var(--woh-border); border-radius:8px;
    font-size:.9rem; font-family:inherit; background:white; transition:border-color .15s, box-shadow .15s;
}

/* Toast */
#wohSmsToast {
    position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
    padding:.75rem 1.25rem; border-radius:10px;
    background:#1f2937; color:#fff; font-size:.875rem; font-weight:600;
    box-shadow:0 8px 20px rgba(0,0,0,.25); transform:translateY(60px);
    transition:transform .3s cubic-bezier(.16,1,.3,1); pointer-events:none;
}
#wohSmsToast.show { transform:translateY(0); }
#wohSmsToast.toast-error { background:#dc2626; }
#wohSmsToast.toast-success { background:#15803d; }

/* Table hover */
table tr { transition:background-color .2s; }
table tbody tr:hover { background-color:#f9fafb; }

/* Animations */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeInDown { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }

/* Mobile */
@media (max-width:640px) {
    .woh-content { padding:.75rem; }
    .topbar-brand span { display:none; }
    div[style*="grid-template-columns:2fr 1fr"] { grid-template-columns:1fr !important; }
    #smsSendGrid { grid-template-columns:1fr !important; }
    .sms-form-row, .woh-tx-form[style*="grid"] { grid-template-columns:1fr !important; }
    div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
}

@media (max-width:1023px) {
    .woh-content { padding:1rem; }
}