/* ==========================================================================
   Weda – shared responsive layer
   --------------------------------------------------------------------------
   Loaded AFTER each page's own inline <style>, so these rules win on equal
   specificity. Everything layout-changing lives inside media queries, so the
   desktop design is untouched.

   Used by: index.php, findDoc.php, admin_dashboard.php, professionals.php,
            doctor_dashboard.php, register.php, send_request.php,
            doctor_login.php, adminLogin.php, profile_view.php
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   Forms – 16px inputs stop iOS Safari zooming the page when a field is focused
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   Public top navigation (index.php, findDoc.php)
   Desktop: .nav-menu is "display: contents", so logo / links / actions sit in
   one row exactly as before. Mobile: collapses behind a menu button.
   -------------------------------------------------------------------------- */
.nav-menu   { display: contents; }
.nav-burger { display: none; }

@media (max-width: 860px) {
    .topnav-inner {
        flex-wrap: wrap;
        gap: 10px 12px;
        padding: 10px 16px;
    }

    .logo {
        flex: 1 1 0;
        min-width: 0;
        white-space: normal;
        font-size: .95rem;
        line-height: 1.3;
    }

    .nav-menu {
        display: flex;
        flex: 1 1 100%;
        flex-direction: column;
        gap: 8px;
        padding: 8px 0 6px;
        border-top: 1px solid var(--line);
    }

    .nav-links {
        flex: none;
        flex-direction: column;
        gap: 2px;
        font-size: 1rem;
    }
    .nav-links a {
        padding: 12px 10px;
        border-radius: 10px;
    }
    .nav-links a:hover,
    .nav-links a.active { background: #EAF1FF; }

    .topnav-actions {
        flex-wrap: wrap;
        gap: 10px;
        padding: 4px 2px 2px;
    }
    .topnav-actions .lang-switch { margin-right: 0; }
    .topnav-actions .btn {
        flex: 1 1 auto;
        text-align: center;
        padding: 11px 16px;
    }

    /* The button + collapsed state only apply once JS has tagged the nav
       (.nav-js). Without JS the menu simply stays open. */
    .nav-js .nav-burger {
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1.5px solid var(--line);
        border-radius: 10px;
        background: #fff;
        color: var(--navy);
        cursor: pointer;
    }
    .nav-js .nav-burger .ico-close        { display: none; }
    .nav-js.open .nav-burger .ico-menu    { display: none; }
    .nav-js.open .nav-burger .ico-close   { display: block; }
    .nav-js .nav-menu                     { display: none; }
    .nav-js.open .nav-menu                { display: flex; }
}

/* --------------------------------------------------------------------------
   Dashboard sidebar → top bar (admin_dashboard.php, doctor_dashboard.php)
   The pages already switch the sidebar to a static row at 860px; this tidies
   the long Sinhala labels so they wrap instead of overflowing.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .sidebar {
        gap: 10px 12px;
        padding: 12px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .sidebar-brand {
        flex: 1 1 100%;
        margin-bottom: 0;
        font-size: .92rem;
        line-height: 1.3;
    }
    .nav-group {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: 0;
    }
    .nav-group li { flex: 1 1 auto; }
    .nav-link {
        justify-content: center;
        text-align: center;
        padding: 10px 14px;
        font-size: .86rem;
        background: var(--surface);
    }
    .nav-link.active { background: #EAF1FF; }
    .nav-link.logout { background: #FEF2F2; }
    .sidebar ~ main  { padding: 20px 16px 44px; }
}

/* --------------------------------------------------------------------------
   Data tables → stacked cards (admin_dashboard.php, professionals.php)
   Add class="resp-table" to the <table> and data-label="…" to each <td>.
   Kicks in below 992px: these tables have 5-8 columns, which is too cramped
   for tablets in portrait as well as for phones.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .resp-table,
    .resp-table tbody,
    .resp-table tr,
    .resp-table td {
        display: block;
        width: 100%;
    }

    /* header row hidden visually, still available to screen readers */
    .resp-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    .resp-table tbody tr {
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
    }
    .resp-table tbody tr:last-child { border-bottom: 0; }

    .resp-table tbody td {
        padding: 5px 0 !important;
        border: 0 !important;
        overflow-wrap: anywhere;
    }

    .resp-table tbody td.name-cell {
        font-size: 1.02rem;
        padding-bottom: 8px !important;
    }

    .resp-table tbody td[data-label] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        text-align: right;
    }
    .resp-table tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 34%;
        max-width: 40%;
        padding-top: 2px;
        text-align: left;
        font-family: 'Noto Sans Sinhala', system-ui, sans-serif;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .02em;
        color: var(--ink-soft);
    }

    /* action buttons: full width, thumb-sized */
    .resp-table td form { width: 100%; }
    .resp-table .actions-cell { width: 100%; padding-top: 6px; }
    .resp-table .actions-cell form { flex: 1 1 140px; }
    .resp-table .action-btn,
    .resp-table .toggle-btn {
        width: 100%;
        justify-content: center;
        padding: 11px 14px;
        font-size: .86rem;
    }
}

/* Plain (non-solid) nav button, e.g. "Log out" next to "My Dashboard" */
.topnav-actions .btn:not(.btn-solid) {
    background: #fff;
    color: #16296B;
    border-color: #E7EAF3;
}
.topnav-actions .btn:not(.btn-solid):hover { background: #F6F9FC; }