/* =========================================================
   BYTC MOBILE APP
   OFFICIAL BRAND DESIGN SYSTEM
   ========================================================= */

:root{

  /* BYTC BRAND */
  --bytc-navy:#07264A;
  --bytc-navy-deep:#04172D;

  --bytc-blue:#075AA8;
  --bytc-blue-bright:#0876D1;
  --bytc-blue-soft:#EAF4FD;

  --bytc-gold:#E7B735;
  --bytc-gold-deep:#C99416;
  --bytc-gold-soft:#FFF6D9;

  --bytc-red:#D72D36;
  --bytc-red-soft:#FFF0F1;

  /* SEMANTIC */
  --bytc-success:#13885D;
  --bytc-success-soft:#E5F7EF;

  --bytc-warning:#C18412;
  --bytc-danger:#D43B47;

  /* SURFACES */
  --bytc-bg:#F3F7FB;
  --bytc-card:#FFFFFF;
  --bytc-border:#D9E4EF;

  --bytc-text:#102641;
  --bytc-muted:#6B7C90;

  /* LAYOUT */
  --bytc-radius-sm:12px;
  --bytc-radius:16px;
  --bytc-radius-lg:21px;

  --bytc-shadow:
    0 12px 32px rgba(4,38,74,.09);

  --bytc-shadow-soft:
    0 5px 17px rgba(4,38,74,.055);
}


/* =========================================================
   GLOBAL
   ========================================================= */

body{
  color:var(--bytc-text);
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(7,90,168,.055),
      transparent 30%
    ),
    var(--bytc-bg);
}

#app{
  background:var(--bytc-bg);
}


/* =========================================================
   BRAND STRIPE
   Blue + Gold + Red
   ========================================================= */

.login-card:before,
.topbar.dark:before,
.simple-header:after,
.profile-head:before{
  background:
    linear-gradient(
      90deg,
      var(--bytc-blue) 0 54%,
      var(--bytc-gold) 54% 82%,
      var(--bytc-red) 82% 100%
    );
}


/* =========================================================
   LOGIN
   ========================================================= */

.login-brand h1{
  color:var(--bytc-navy);
}

.login-brand p{
  color:var(--bytc-blue);
}

.mini-logo{
  border-color:rgba(231,183,53,.70);
  box-shadow:
    0 16px 35px rgba(4,38,74,.12),
    0 0 0 6px rgba(234,244,253,.70);
}

.login-card{
  border-color:var(--bytc-border);
  box-shadow:var(--bytc-shadow);
}

.login-card:before{
  height:4px;
  left:20px;
  right:20px;
}

.input-wrap{
  border-color:var(--bytc-border);
}

.input-wrap:focus-within{
  border-color:var(--bytc-blue);
  box-shadow:
    0 0 0 4px rgba(7,90,168,.08);
}

.link-btn{
  color:var(--bytc-blue);
}

.primary{
  background:
    linear-gradient(
      135deg,
      var(--bytc-navy-deep),
      var(--bytc-blue)
    );

  box-shadow:
    0 11px 23px rgba(7,90,168,.21);
}


/* =========================================================
   BRANCH HEADER
   ========================================================= */

.topbar.dark{
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(231,183,53,.16),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      var(--bytc-navy-deep),
      var(--bytc-navy) 52%,
      var(--bytc-blue)
    );

  border-bottom:
    3px solid var(--bytc-gold);
}

.topbar.dark:before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:3px;
  z-index:4;
}

.branch-emblem{
  border-color:rgba(231,183,53,.60);
}

.eyebrow{
  color:#FFE59A;
}

.eyebrow:before{
  background:var(--bytc-gold);
}


/* =========================================================
   PRIMARY STUDENT REGISTRATION ACTION
   Blue-dominant, gold premium accent
   ========================================================= */

.hero-action{
  color:#fff;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255,255,255,.13),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      var(--bytc-navy),
      var(--bytc-blue)
    );

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

  box-shadow:
    0 15px 30px rgba(7,90,168,.22);
}

.hero-action:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;

  background:
    linear-gradient(
      180deg,
      var(--bytc-gold),
      var(--bytc-red)
    );
}

.hero-action small{
  color:#FFE59A;
  opacity:1;
}

.hero-action strong{
  color:#fff;
}

.hero-action span{
  color:#EAF4FD;
}

.hero-plus{
  background:
    linear-gradient(
      145deg,
      var(--bytc-gold),
      var(--bytc-gold-deep)
    );

  color:var(--bytc-navy-deep);

  border:
    2px solid rgba(255,255,255,.80);

  box-shadow:
    0 9px 22px rgba(0,0,0,.22);
}

.hero-plus:after{
  color:var(--bytc-navy-deep);
}


/* =========================================================
   DASHBOARD STAT CARDS
   ========================================================= */

.stats-grid article{
  border-color:var(--bytc-border);
  box-shadow:var(--bytc-shadow-soft);
}

.stats-grid article:nth-child(1){
  border-top:3px solid var(--bytc-blue);
}

.stats-grid article:nth-child(2){
  border-top:3px solid var(--bytc-success);
}

.stats-grid article:nth-child(3){
  border-top:3px solid var(--bytc-red);
}

.stats-grid article:nth-child(4){
  border-top:3px solid var(--bytc-gold);
}

.stats-grid article:nth-child(1) strong{
  color:var(--bytc-blue);
}

.stats-grid article:nth-child(4) strong{
  color:var(--bytc-gold-deep);
}


/* =========================================================
   QUICK ACTIONS
   ========================================================= */

.quick-grid button{
  border-color:var(--bytc-border);
  box-shadow:var(--bytc-shadow-soft);
}

.qa-icon{
  color:var(--bytc-blue);
  background:var(--bytc-blue-soft);
}


/* Attendance */
.quick-grid button:nth-child(2) .qa-icon{
  color:var(--bytc-success);
  background:var(--bytc-success-soft);
}


/* Transactions */
.quick-grid button:nth-child(6) .qa-icon{
  color:var(--bytc-gold-deep);
  background:var(--bytc-gold-soft);
}


/* Notices */
.quick-grid button:nth-child(7) .qa-icon{
  color:var(--bytc-red);
  background:var(--bytc-red-soft);
}


/* All other modules remain BYTC Blue */
.quick-grid button:nth-child(3) .qa-icon,
.quick-grid button:nth-child(4) .qa-icon,
.quick-grid button:nth-child(5) .qa-icon,
.quick-grid button:nth-child(8) .qa-icon{
  color:var(--bytc-blue);
  background:var(--bytc-blue-soft);
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.section-head h3{
  color:var(--bytc-navy);
}

.section-head button{
  color:var(--bytc-blue);
}


/* =========================================================
   STUDENT CARDS
   ========================================================= */

.student-mini,
.student-row{
  border-color:var(--bytc-border);
  box-shadow:var(--bytc-shadow-soft);
}

.student-avatar{
  color:var(--bytc-blue);

  background:
    linear-gradient(
      145deg,
      #F2F7FD,
      #DCEBFA
    );
}

.student-row:hover{
  border-color:#BCD5EE;
}


/* =========================================================
   STATUS BADGES
   ========================================================= */

.active-status{
  color:#08704C!important;
  background:var(--bytc-success-soft);
}

.pending-status{
  color:#9A6510!important;
  background:var(--bytc-gold-soft);
}


/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.bottom-nav{
  background:
    linear-gradient(
      180deg,
      var(--bytc-navy),
      var(--bytc-navy-deep)
    );

  border-top:
    1px solid rgba(255,255,255,.07);
}

.bottom-nav .nav-active{
  color:var(--bytc-gold);
}

.bottom-nav .nav-add{
  background:
    linear-gradient(
      145deg,
      #F5D66E,
      var(--bytc-gold)
    );

  border-color:var(--bytc-navy-deep);

  box-shadow:
    0 10px 25px rgba(201,148,32,.36);
}


/* =========================================================
   SIMPLE HEADERS
   Students / Registration / Profile etc.
   ========================================================= */

.simple-header{
  position:relative;

  background:
    linear-gradient(
      180deg,
      #FFFFFF,
      #FAFCFF
    );

  border-bottom:
    1px solid var(--bytc-border);
}

.simple-header:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
}

.simple-header h2{
  color:var(--bytc-navy);
}

.back-btn{
  color:var(--bytc-navy);
  border-color:var(--bytc-border);
}


/* =========================================================
   SEARCH + FILTER
   ========================================================= */

.search-input{
  border-color:var(--bytc-border);
}

.search-input:focus{
  border-color:var(--bytc-blue);
  outline:none;

  box-shadow:
    0 0 0 4px rgba(7,90,168,.07);
}

.filter{
  color:var(--bytc-text);
  border-color:var(--bytc-border);
}

.active-filter{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--bytc-navy),
      var(--bytc-blue)
    );

  border-color:var(--bytc-blue);
}


/* =========================================================
   REGISTRATION STEPPER
   ========================================================= */

.stepper:before{
  background:#DEE8F1;
}

.step-dot.current{
  color:#fff;

  background:var(--bytc-blue);

  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(231,183,53,.85),
    0 6px 15px rgba(7,90,168,.18);
}

.step-dot.done{
  color:#fff;
  background:var(--bytc-success);
}


/* =========================================================
   REGISTRATION FORMS
   ========================================================= */

.form-step{
  border-color:var(--bytc-border);
  box-shadow:var(--bytc-shadow-soft);
}

.step-title small{
  color:var(--bytc-red);
}

.step-title h3{
  color:var(--bytc-navy);
}

.photo-upload{
  border-color:var(--bytc-border);
}

.photo-upload button,
.upload-card button{
  color:var(--bytc-blue);
  background:var(--bytc-blue-soft);
}

.form-content input,
.form-content select,
.form-content textarea{
  border-color:var(--bytc-border);
}

.form-content input:focus,
.form-content select:focus,
.form-content textarea:focus{
  border-color:var(--bytc-blue);

  box-shadow:
    0 0 0 4px rgba(7,90,168,.075);
}


/* =========================================================
   STUDENT PROFILE
   ========================================================= */

.profile-head{
  position:relative;
  overflow:hidden;

  border-color:var(--bytc-border);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(231,183,53,.10),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #FFFFFF,
      #F7FBFF
    );
}

.profile-head:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:4px;
}

.profile-head h2{
  color:var(--bytc-navy);
}

.tab-row{
  background:#EAF0F6;
}

.tab-row .tab-active{
  color:var(--bytc-blue);
  border-bottom:2px solid var(--bytc-gold);
}

.detail-card{
  border-color:var(--bytc-border);
  box-shadow:var(--bytc-shadow-soft);
}

.detail-card h3{
  color:var(--bytc-navy);
}


/* =========================================================
   SUCCESS SCREEN
   ========================================================= */

.success-icon{
  background:var(--bytc-success);
}

.success-screen h2{
  color:var(--bytc-success);
}


/* =========================================================
   FLOATING ADD BUTTON
   ========================================================= */

.floating-add{
  color:var(--bytc-navy-deep);

  background:
    linear-gradient(
      145deg,
      #F5D66E,
      var(--bytc-gold)
    );

  box-shadow:
    0 12px 28px rgba(201,148,32,.35);
}


/* =========================================================
   CONSISTENT PREMIUM CARDS
   ========================================================= */

.login-card,
.stats-grid article,
.student-mini,
.student-row,
.form-step,
.upload-card,
.review-card,
.profile-head,
.detail-card,
.success-card{
  border-radius:var(--bytc-radius);
}


/* =========================================================
   FONT SYSTEM
   ========================================================= */

body,
button,
input,
select,
textarea{
  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;
}


/* =========================================================
   ACCESSIBILITY / TOUCH
   ========================================================= */

button,
.filter,
.student-row{
  min-tap-highlight-color:transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:
    3px solid rgba(7,118,209,.22);

  outline-offset:2px;
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:380px){

  .hero-action strong{
    font-size:16px;
  }

  .branch-heading h2{
    font-size:18px;
  }

  .quick-grid{
    gap:7px;
  }

  .quick-grid button{
    min-height:83px;
  }
}


/* ===== STEP 10E FINAL BYTC BRAND LOCK ===== */

/*
  Exact logo palette:
  Blue       #0E4EA3
  Blue 2     #2861AD
  Blue 3     #4979B8
  Red        #ED2226
  Ink        #1C1D1E
  Slate      #525D6C
  Border     #D6D6DF
  White      #FDFDFE
*/

:root{
  --brand-blue:#0E4EA3;
  --brand-blue-2:#2861AD;
  --brand-blue-3:#4979B8;

  --brand-red:#ED2226;

  --brand-ink:#1C1D1E;
  --brand-slate:#525D6C;

  --brand-line:#D6D6DF;
  --brand-white:#FDFDFE;

  --brand-soft-blue:#EEF5FC;
  --brand-bg:#F4F7FB;

  --brand-success:#13885D;
  --brand-warning:#C18412;
}


/* ---------------------------------------
   GLOBAL
--------------------------------------- */

body{
  color:var(--brand-ink);

  background:
    radial-gradient(
      circle at 12% 7%,
      rgba(14,78,163,.07),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 90%,
      rgba(40,97,173,.05),
      transparent 30%
    ),
    var(--brand-bg);
}

#app{
  background:var(--brand-bg);
}


/* ---------------------------------------
   LOGIN
--------------------------------------- */

.login-brand h1{
  color:var(--brand-blue);
}

.login-brand p{
  color:var(--brand-slate);
}

.mini-logo{
  border-color:rgba(14,78,163,.28);

  box-shadow:
    0 16px 35px rgba(14,78,163,.13),
    0 0 0 6px rgba(238,245,252,.90);
}

.login-card{
  border-color:var(--brand-line);

  box-shadow:
    0 18px 44px rgba(14,78,163,.11);
}

.login-card:before{
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--brand-blue) 0 82%,
      var(--brand-red) 82% 100%
    );
}

.input-wrap:focus-within{
  border-color:var(--brand-blue);

  box-shadow:
    0 0 0 4px rgba(14,78,163,.08);
}

.link-btn{
  color:var(--brand-blue);
}

.primary{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #082E63,
      var(--brand-blue) 62%,
      var(--brand-blue-2)
    );

  box-shadow:
    0 12px 25px rgba(14,78,163,.23);
}


/* ---------------------------------------
   BRANCH HEADER
--------------------------------------- */

.topbar.dark{
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255,255,255,.08),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      #062B59,
      var(--brand-blue) 62%,
      var(--brand-blue-2)
    );

  border-bottom:
    3px solid var(--brand-red);
}

.topbar.dark:before{
  background:var(--brand-red);
}

.branch-emblem{
  border-color:rgba(255,255,255,.55);
}

.eyebrow{
  color:#DCEBFA;
}

.eyebrow:before{
  background:var(--brand-red);
}


/* ---------------------------------------
   PRIMARY REGISTRATION CTA
--------------------------------------- */

.hero-action{
  color:#fff;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255,255,255,.10),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      #082E63,
      var(--brand-blue) 60%,
      var(--brand-blue-2)
    );

  box-shadow:
    0 16px 33px rgba(14,78,163,.24);
}

.hero-action:before{
  width:5px;

  background:
    var(--brand-red);
}

.hero-action small{
  color:#CFE2F8;
}

.hero-action strong{
  color:#fff;
}

.hero-action span{
  color:#EEF5FC;
}

.hero-plus{
  color:var(--brand-blue);

  background:
    var(--brand-white);

  border:
    2px solid rgba(255,255,255,.95);

  box-shadow:
    0 10px 23px rgba(0,0,0,.20),
    0 0 0 2px rgba(237,34,38,.40);
}

.hero-plus:after{
  color:var(--brand-blue);
}


/* ---------------------------------------
   STATS
--------------------------------------- */

.stats-grid article{
  border-color:var(--brand-line);

  box-shadow:
    0 6px 18px rgba(14,78,163,.055);
}

.stats-grid article:nth-child(1){
  border-top:
    3px solid var(--brand-blue);
}

.stats-grid article:nth-child(2){
  border-top:
    3px solid var(--brand-success);
}

.stats-grid article:nth-child(3){
  border-top:
    3px solid var(--brand-red);
}

.stats-grid article:nth-child(4){
  border-top:
    3px solid var(--brand-blue-3);
}

.stats-grid article:nth-child(1) strong,
.stats-grid article:nth-child(4) strong{
  color:var(--brand-blue);
}


/* ---------------------------------------
   QUICK ACTIONS
--------------------------------------- */

.quick-grid button{
  border-color:var(--brand-line);

  box-shadow:
    0 5px 16px rgba(14,78,163,.05);
}

.qa-icon{
  color:var(--brand-blue);

  background:
    var(--brand-soft-blue);
}

.quick-grid button:nth-child(2) .qa-icon{
  color:var(--brand-success);

  background:#E6F7EF;
}

.quick-grid button:nth-child(7) .qa-icon{
  color:var(--brand-red);

  background:#FFF0F1;
}


/* ---------------------------------------
   STUDENT CARDS
--------------------------------------- */

.student-mini,
.student-row{
  border-color:var(--brand-line);

  box-shadow:
    0 5px 17px rgba(14,78,163,.05);
}

.student-avatar{
  color:var(--brand-blue);

  background:
    linear-gradient(
      145deg,
      #F2F7FD,
      #DDEBFA
    );
}


/* ---------------------------------------
   BOTTOM NAV
--------------------------------------- */

.bottom-nav{
  background:
    linear-gradient(
      180deg,
      #082E63,
      #041C3A
    );

  border-top:
    1px solid rgba(255,255,255,.08);
}

.bottom-nav .nav-active{
  color:#fff;
  position:relative;
}

.bottom-nav .nav-active:after{
  content:"";

  width:18px;
  height:2px;

  border-radius:999px;

  background:
    var(--brand-red);

  margin-top:3px;
}

.bottom-nav .nav-add{
  color:#fff;

  background:
    linear-gradient(
      145deg,
      var(--brand-blue-2),
      var(--brand-blue)
    );

  border:
    3px solid #fff;

  outline:
    2px solid rgba(237,34,38,.52);

  box-shadow:
    0 11px 27px rgba(14,78,163,.33);
}

.bottom-nav .nav-add .ui-svg{
  color:#fff;
}


/* ---------------------------------------
   SIMPLE HEADERS
--------------------------------------- */

.simple-header{
  border-bottom-color:
    var(--brand-line);
}

.simple-header:after{
  background:
    linear-gradient(
      90deg,
      var(--brand-blue) 0 84%,
      var(--brand-red) 84% 100%
    );
}

.simple-header h2{
  color:var(--brand-blue);
}


/* ---------------------------------------
   SEARCH / FILTER
--------------------------------------- */

.search-input{
  border-color:var(--brand-line);
}

.search-input:focus{
  border-color:var(--brand-blue);

  box-shadow:
    0 0 0 4px rgba(14,78,163,.075);
}

.filter{
  border-color:var(--brand-line);
}

.active-filter{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #082E63,
      var(--brand-blue)
    );

  border-color:
    var(--brand-blue);
}


/* ---------------------------------------
   REGISTRATION STEPPER
--------------------------------------- */

.step-dot.current{
  color:#fff;

  background:
    var(--brand-blue);

  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(237,34,38,.56),
    0 7px 16px rgba(14,78,163,.20);
}

.step-dot.done{
  background:
    var(--brand-success);
}


/* ---------------------------------------
   REGISTRATION FORM
--------------------------------------- */

.form-step{
  border-color:
    var(--brand-line);

  box-shadow:
    0 8px 25px rgba(14,78,163,.055);
}

.step-title small{
  color:
    var(--brand-red);
}

.step-title h3{
  color:
    var(--brand-blue);
}

.form-content input,
.form-content select,
.form-content textarea{
  border-color:
    var(--brand-line);
}

.form-content input:focus,
.form-content select:focus,
.form-content textarea:focus{
  border-color:
    var(--brand-blue);

  box-shadow:
    0 0 0 4px rgba(14,78,163,.075);
}

.photo-upload button,
.upload-card button{
  color:
    var(--brand-blue);

  background:
    var(--brand-soft-blue);
}


/* ---------------------------------------
   PROFILE
--------------------------------------- */

.profile-head{
  border-color:
    var(--brand-line);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(14,78,163,.075),
      transparent 35%
    ),
    #fff;
}

.profile-head:before{
  background:
    linear-gradient(
      90deg,
      var(--brand-blue) 0 84%,
      var(--brand-red) 84% 100%
    );
}

.profile-head h2{
  color:
    var(--brand-blue);
}

.tab-row .tab-active{
  color:
    var(--brand-blue);

  border-bottom:
    2px solid var(--brand-red);
}

.detail-card{
  border-color:
    var(--brand-line);

  box-shadow:
    0 6px 18px rgba(14,78,163,.05);
}

.detail-card h3{
  color:
    var(--brand-blue);
}


/* ---------------------------------------
   FLOATING + BUTTON
--------------------------------------- */

.floating-add{
  color:#fff;

  background:
    linear-gradient(
      145deg,
      var(--brand-blue-2),
      var(--brand-blue)
    );

  border:
    3px solid #fff;

  outline:
    2px solid rgba(237,34,38,.48);

  box-shadow:
    0 12px 28px rgba(14,78,163,.30);
}


/* ---------------------------------------
   STATUS
--------------------------------------- */

.active-status{
  color:#08704C!important;
  background:#E5F7EF;
}

.pending-status{
  color:#8A5A0C!important;
  background:#FFF4D8;
}


/* ---------------------------------------
   TEXT
--------------------------------------- */

.section-head h3,
.detail-card h3{
  color:
    var(--brand-ink);
}

.section-head button{
  color:
    var(--brand-blue);
}

.muted,
.simple-header p{
  color:
    var(--brand-slate);
}