*{
    box-sizing:border-box;
}

:root{

    --navy:#17365f;

    --navy-dark:#102944;

    --blue:#2563eb;

    --teal:#0f766e;

    --bg:#f2f6fa;

    --card:#ffffff;

    --line:#dbe4ed;

    --text:#172033;

    --muted:#687386;
}


body{

    margin:0;

    font-family:
        Inter,
        Segoe UI,
        Arial,
        sans-serif;

    background:var(--bg);

    color:var(--text);
}


a{
    color:inherit;
}


.topbar{

    min-height:72px;

    padding:
        12px
        28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    background:

        linear-gradient(
            135deg,
            var(--navy-dark),
            var(--navy)
        );

    color:#fff;

    box-shadow:

        0 4px 18px
        rgba(
            15,
            39,
            69,
            .16
        );
}


.brand{

    display:flex;

    align-items:center;

    gap:12px;
}


.brand strong{

    display:block;

    font-size:17px;
}


.brand span{

    display:block;

    margin-top:3px;

    color:#cbd8e8;

    font-size:12px;
}


.brand-logo{

    width:58px;

    height:58px;

    display:grid;

    place-items:center;

    border-radius:17px;

    background:

        linear-gradient(
            135deg,
            #2869dc,
            #16817e
        );

    color:white;

    font-size:20px;

    font-weight:900;

    box-shadow:

        0 10px 25px
        rgba(
            37,
            99,
            235,
            .20
        );
}


.brand-logo.small{

    width:42px;

    height:42px;

    border-radius:12px;

    font-size:15px;
}


.top-actions{

    display:flex;

    align-items:center;

    gap:10px;
}


.user-name{

    font-size:13px;

    color:#dce7f3;
}


.shell{

    width:min(
        1450px,
        100%
    );

    margin:auto;

    padding:28px;
}


.shell.narrow{

    width:min(
        1000px,
        100%
    );
}


.hero,
.patient-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:22px;

    padding:
        28px
        30px;

    border:

        1px solid
        var(--line);

    border-radius:22px;

    background:

        radial-gradient(
            circle at top right,
            rgba(
                37,
                99,
                235,
                .13
            ),
            transparent 35%
        ),

        #fff;
}


.hero.compact{

    padding:
        22px
        26px;
}


.hero h1,
.patient-head h1{

    margin:
        5px
        0
        8px;

    font-size:32px;

    letter-spacing:-.7px;
}


.hero p{

    margin:0;

    max-width:700px;

    color:var(--muted);

    line-height:1.55;
}


.eyebrow{

    color:#35679d;

    font-size:11px;

    font-weight:900;

    letter-spacing:1.4px;
}


.eyebrow.teal{

    color:var(--teal);
}


.hero-actions{

    display:flex;

    flex-wrap:wrap;

    gap:10px;
}


.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:7px;

    padding:
        10px
        14px;

    border:0;

    border-radius:11px;

    text-decoration:none;

    cursor:pointer;

    font-size:13px;

    font-weight:800;
}


.btn.primary{

    color:white;

    background:

        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    box-shadow:

        0 8px 16px
        rgba(
            37,
            99,
            235,
            .17
        );
}


.btn.danger{

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #b91c1c
        );

    border:
        1px solid
        #b91c1c;

    box-shadow:
        0 8px 16px
        rgba(
            185,
            28,
            28,
            .18
        );
}

.btn.danger:hover{
    filter:brightness(.96);
}

.delete-patient-form{
    margin:0;
}

.btn.secondary{

    color:#24405f;

    background:#edf3f8;

    border:
        1px solid
        #d7e2ec;
}


.btn.ghost{

    color:#fff;

    background:
        rgba(
            255,
            255,
            255,
            .10
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .20
        );
}


.btn.full{

    width:100%;
}


.stats-grid{

    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:16px;

    margin-bottom:22px;
}


.stat-card{

    padding:20px;

    border:
        1px solid
        var(--line);

    border-radius:18px;

    background:#fff;
}


.stat-card.highlight{

    background:

        linear-gradient(
            135deg,
            #eff7ff,
            #ecfdf8
        );
}


.stat-card span{

    display:block;

    margin-bottom:8px;

    color:var(--muted);

    font-size:13px;
}


.stat-card strong{

    font-size:31px;
}


.card{

    padding:22px;

    background:#fff;

    border:
        1px solid
        var(--line);

    border-radius:20px;

    box-shadow:

        0 8px 25px
        rgba(
            30,
            48,
            70,
            .04
        );
}


.card-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    margin-bottom:18px;
}


.card-head h2{

    margin:
        4px
        0
        0;

    font-size:22px;
}


.table-wrap{

    overflow:auto;

    border:
        1px solid
        var(--line);

    border-radius:14px;
}


table{

    width:100%;

    min-width:800px;

    border-collapse:collapse;
}


th,
td{

    padding:
        13px
        14px;

    border-bottom:
        1px solid
        #edf1f5;

    text-align:left;

    font-size:13px;
}


th{

    background:#f8fafc;

    color:#536174;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.4px;
}


tr:last-child td{

    border-bottom:0;
}


.empty{

    padding:35px;

    text-align:center;

    color:var(--muted);
}


.link{

    color:#1d5ec8;

    text-decoration:none;

    font-weight:800;

    white-space:nowrap;
}


.status,
.pill{

    display:inline-flex;

    padding:
        5px
        9px;

    border-radius:999px;

    background:#eef2f6;

    font-size:11px;

    font-weight:800;

    text-transform:capitalize;
}


.status.deschis,
.status.internat{

    color:#8a5d00;

    background:#fff4d6;
}


.status.operat{

    color:#174ea6;

    background:#e8f1ff;
}


.status.externat,
.status.inchis{

    color:#166534;

    background:#e8f7ef;
}


.search-row{

    display:flex;

    gap:10px;

    margin-bottom:18px;
}


.search-row input{

    flex:1;
}


.form-grid{

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:17px;
}


.form-stack{

    display:grid;

    gap:17px;
}


label{

    display:grid;

    gap:7px;

    color:#344054;

    font-size:13px;

    font-weight:800;
}


input,
select,
textarea{

    width:100%;

    padding:
        12px
        13px;

    outline:none;

    border:
        1px solid
        #cfd9e5;

    border-radius:11px;

    background:#fff;

    color:#172033;

    font:inherit;
}


input:focus,
select:focus,
textarea:focus{

    border-color:#3b82f6;

    box-shadow:

        0 0 0 3px
        rgba(
            59,
            130,
            246,
            .10
        );
}


.span-2{

    grid-column:
        span 2;
}


.form-actions{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:8px;
}


.patient-meta{

    display:flex;

    flex-wrap:wrap;

    gap:
        8px
        17px;

    color:var(--muted);

    font-size:13px;
}


.patient-status{

    min-width:160px;

    padding:
        14px
        16px;

    border-radius:16px;

    background:#eef7ff;

    text-align:center;
}


.patient-status span{

    display:block;

    margin-bottom:5px;

    color:var(--muted);

    font-size:11px;
}


.patient-status strong{

    text-transform:capitalize;
}


.success-box,
.error-box{

    margin-bottom:18px;

    padding:
        13px
        15px;

    border-radius:12px;

    line-height:1.5;

    font-size:13px;
}


.success-box{

    color:#166534;

    background:#e9f8f0;

    border:
        1px solid
        #bde5cd;
}


.error-box{

    color:#9f2118;

    background:#fff0ee;

    border:
        1px solid
        #f0c6c2;
}


.case-grid{

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:14px;
}


.case-option{

    position:relative;

    padding:18px;

    cursor:pointer;

    border:
        2px solid
        #dde6ef;

    border-radius:17px;

    background:#fff;

    transition:.15s;
}


.case-option:hover{

    transform:
        translateY(
            -1px
        );

    border-color:#94b7e8;
}


.case-option input{

    position:absolute;

    opacity:0;
}


.case-option:has(
    input:checked
){

    border-color:#2563eb;

    background:#f6faff;

    box-shadow:

        0 0 0 4px
        rgba(
            37,
            99,
            235,
            .08
        );
}


.case-eye{

    display:block;

    margin-bottom:8px;

    color:#2563eb;

    font-size:24px;
}


.case-option strong{

    display:block;

    margin-bottom:5px;
}


.case-option small{

    color:var(--muted);

    font-weight:500;

    line-height:1.4;
}


.tabs{

    display:flex;

    gap:7px;

    overflow:auto;

    margin-bottom:20px;

    padding:7px;

    border:
        1px solid
        var(--line);

    border-radius:14px;

    background:#fff;
}


.tabs a{

    padding:
        9px
        12px;

    border-radius:9px;

    color:#516174;

    text-decoration:none;

    white-space:nowrap;

    font-size:12px;

    font-weight:800;
}


.tabs a.active{

    color:#fff;

    background:#17365f;
}


.module-grid{

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:16px;
}


.module-card{

    display:flex;

    gap:15px;

    padding:20px;

    border:
        1px solid
        var(--line);

    border-radius:18px;

    background:#fff;
}


.module-number{

    flex:
        0 0 44px;

    height:44px;

    display:grid;

    place-items:center;

    border-radius:12px;

    color:#1f5d9c;

    background:#edf4fb;

    font-weight:900;
}


.module-card h3{

    margin:
        1px
        0
        7px;
}


.module-card p{

    margin:
        0
        0
        12px;

    color:var(--muted);

    font-size:13px;

    line-height:1.5;
}


.module-state{

    display:inline-block;

    padding:
        5px
        9px;

    border-radius:999px;

    font-size:11px;

    font-weight:800;
}


.module-state.ready{

    color:#166534;

    background:#e6f7ee;
}


.module-state.next{

    color:#1d4ed8;

    background:#eaf2ff;
}


.module-state.locked{

    color:#667085;

    background:#f1f3f5;
}


.auth-body{

    min-height:100vh;

    display:grid;

    place-items:center;

    padding:24px;

    background:

        radial-gradient(
            circle at top left,
            rgba(
                37,
                99,
                235,
                .19
            ),
            transparent 35%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(
                15,
                118,
                110,
                .15
            ),
            transparent 35%
        ),

        #eef3f8;
}


.auth-card{

    width:min(
        470px,
        100%
    );

    padding:34px;

    border:
        1px solid
        var(--line);

    border-radius:26px;

    background:#fff;

    box-shadow:

        0 25px 70px
        rgba(
            16,
            38,
            66,
            .15
        );
}


.auth-card .brand-logo{

    margin-bottom:18px;
}


.auth-card h1{

    margin:
        6px
        0
        8px;

    font-size:31px;
}


.muted{

    color:var(--muted);

    line-height:1.55;
}


.local-badge{

    margin-top:20px;

    color:#687386;

    text-align:center;

    font-size:12px;
}


@media(
    max-width:900px
){

    .stats-grid,
    .module-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .hero,
    .patient-head{

        flex-direction:column;

        align-items:flex-start;
    }
}


@media(
    max-width:650px
){

    .stats-grid,
    .module-grid,
    .form-grid,
    .case-grid{

        grid-template-columns:1fr;
    }


    .span-2{

        grid-column:
            span 1;
    }


    .shell{

        padding:17px;
    }


    .topbar{

        padding:
            12px
            15px;
    }


    .hero h1,
    .patient-head h1{

        font-size:26px;
    }


    .user-name{

        display:none;
    }


    .search-row{

        flex-wrap:wrap;
    }
}

/* ================================================================
   OFTALMO MOBILE PRO v1 — responsive-first overrides
   ================================================================ */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ max-width:100%; overflow-x:hidden; }
img,svg,video,canvas{ max-width:100%; height:auto; }
button,input,select,textarea{ max-width:100%; }
.btn,button,input[type="submit"],input[type="button"]{ touch-action:manipulation; }

/* Keep wide clinical content contained instead of breaking viewport */
.table-wrap,.matrix-wrap,.responsive-table,.table-responsive{
  width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
table{ max-width:100%; }

@media (max-width: 900px){
  .shell,.shell.narrow,.pro-shell,.v42-shell,.dashboard-shell{
    width:100% !important; max-width:100% !important; padding-left:16px !important; padding-right:16px !important;
  }
  .hero,.patient-head,.pro-hero,.v42-hero{
    width:100%; min-width:0; flex-direction:column !important; align-items:stretch !important;
  }
  .hero>*,.patient-head>*,.pro-hero>*,.v42-hero>*{ min-width:0; max-width:100%; }
  .pro-actions,.form-actions{ flex-wrap:wrap; }
  .pro-actions .btn,.form-actions .btn{ min-height:44px; }
}

@media (max-width: 720px){
  body{ font-size:15px !important; }
  .topbar{
    min-height:auto !important; padding:10px 12px !important; display:flex !important;
    flex-direction:column !important; align-items:stretch !important; gap:10px !important;
  }
  .brand{ width:100%; min-width:0; }
  .brand-logo{ width:46px !important; height:46px !important; border-radius:13px !important; flex:0 0 auto; }
  .brand strong{ font-size:15px !important; line-height:1.25; }
  .brand span{ font-size:11px !important; line-height:1.35; }
  .top-actions{
    width:100% !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important;
  }
  .top-actions .btn{ width:100% !important; min-width:0 !important; min-height:44px; padding:10px 9px !important; justify-content:center; text-align:center; }
  .user-name{ display:none !important; }

  .shell,.shell.narrow,.pro-shell,.v42-shell,.dashboard-shell{
    width:100% !important; max-width:100% !important; margin:0 auto !important; padding:12px !important;
  }
  .hero,.patient-head,.pro-hero,.v42-hero{
    margin-bottom:14px !important; padding:16px !important; border-radius:16px !important;
  }
  .hero h1,.patient-head h1,.pro-hero h1,.v42-hero h1{ font-size:24px !important; line-height:1.15 !important; overflow-wrap:anywhere; }
  h2{ overflow-wrap:anywhere; }

  .pro-grid,.patient-main-grid,.stats-grid,.stat-grid,.module-grid,.case-grid,.case-card-grid,
  .form-grid,.diag-grid,.doc-grid,.v4-fields,.v42-fields,.pro-fields,.recent-grid,.patient-grid{
    grid-template-columns:1fr !important;
  }
  .pro-grid>*,.patient-main-grid>*,.stats-grid>*,.stat-grid>*,.module-grid>*,.case-grid>*,
  .case-card-grid>*,.form-grid>*,.diag-grid>*,.doc-grid>*,.v4-fields>*,.v42-fields>*,.pro-fields>*{
    grid-column:1 / -1 !important; min-width:0 !important;
  }
  .span-2,.span-3,.span-4,.span-6,.span-8,.span-12{ grid-column:1 / -1 !important; }

  .pro-actions,.form-actions,.search-row{
    width:100% !important; display:grid !important; grid-template-columns:1fr !important; gap:8px !important;
  }
  .pro-actions .btn,.form-actions .btn,.search-row .btn{ width:100% !important; justify-content:center; min-height:46px; }

  /* Horizontal section navigation is intentional and touch-friendly */
  .pro-nav,.v42-steps{
    width:100% !important; max-width:100% !important; overflow-x:auto !important; overflow-y:hidden !important;
    display:flex !important; flex-wrap:nowrap !important; gap:6px !important; padding:7px !important;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  }
  .pro-nav a,.v42-step{ flex:0 0 auto !important; min-height:42px !important; scroll-snap-align:start; white-space:nowrap !important; }

  /* Forms: iOS-safe sizing and large touch targets */
  input,select,textarea,button{ font-size:16px !important; }
  input:not([type="checkbox"]):not([type="radio"]),select,textarea,.form-control,.form-select{
    width:100% !important; min-width:0 !important; min-height:46px !important; border-radius:10px;
  }
  textarea{ min-height:96px !important; resize:vertical; }
  label{ line-height:1.35; }

  /* Tables remain usable on phones without forcing the whole page wide */
  table{ width:max-content !important; min-width:100% !important; font-size:13px !important; }
  table th,table td{ padding:9px 10px !important; white-space:nowrap; }
  .table-wrap,.matrix-wrap,.responsive-table,.table-responsive{
    display:block !important; width:100% !important; max-width:100% !important; overflow-x:auto !important;
    border-radius:12px; -webkit-overflow-scrolling:touch;
  }

  .card,.panel,.pro-card,.v4-card,.v42-card,.case-card,.stat-card{
    min-width:0 !important; max-width:100% !important; border-radius:15px !important;
  }

  /* Login */
  .auth-body{ min-height:100dvh !important; padding:16px !important; align-items:center !important; }
  .auth-card{ width:100% !important; max-width:460px !important; padding:24px 18px !important; border-radius:20px !important; }
  .auth-card h1{ font-size:27px !important; }

  /* Modal/dialog safety */
  .modal,.dialog,.popup,.modal-content,.dialog-content{ max-width:calc(100vw - 24px) !important; }
}

@media (max-width: 430px){
  .top-actions{ grid-template-columns:1fr !important; }
  .shell,.shell.narrow,.pro-shell,.v42-shell,.dashboard-shell{ padding:10px !important; }
  .hero,.patient-head,.pro-hero,.v42-hero{ padding:14px !important; }
  .hero h1,.patient-head h1,.pro-hero h1,.v42-hero h1{ font-size:22px !important; }
  .btn{ white-space:normal; line-height:1.2; }
}

/* Safe-area support for modern iPhones */
@supports (padding: max(0px)){
  @media (max-width:720px){
    .topbar{ padding-left:max(12px,env(safe-area-inset-left)) !important; padding-right:max(12px,env(safe-area-inset-right)) !important; }
    body{ padding-bottom:env(safe-area-inset-bottom); }
  }
}