/* ── Design Tokens ─────────────────────────────────────────── */
    :root {
      --navy:       #0b2a52;
      --navy-mid:   #1a3f72;
      --accent:     #e8214a;
      --accent-2:   #de1c85;
      --gold:       #f0a500;
      --off-white:  #f6f7fb;
      --text-muted: #6b7a99;
      --card-bg:    #ffffff;
      --border:     #dde2ef;
      --shadow-lg:  0 24px 64px rgba(11,42,82,.18);
      --radius:     14px;
    }

    /* ── Reset ─────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--navy);
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr auto;
      overflow-x: hidden;
    }

    /* ── Decorative background ─────────────────────────────────── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 55% at 10% 0%, rgba(26,63,114,.70) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 90% 100%, rgba(232,33,74,.18) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(240,165,0,.07) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    /* decorative geometric lines */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        repeating-linear-gradient(
          -45deg,
          transparent,
          transparent 60px,
          rgba(255,255,255,.025) 60px,
          rgba(255,255,255,.025) 61px
        );
      pointer-events: none;
      z-index: 0;
    }

    /* ── Header ────────────────────────────────────────────────── */
    header {
      position: Center;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 20px 48px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: rgba(11,42,82,.50);
      backdrop-filter: blur(12px);
    }

    .logo-group {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .logo-group img {
      height: 72px;
      width: auto;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
    }

    .header-text { line-height: 1.35; }

    .header-text .uni-name {
      font-family: 'Playfair Display', serif;
      font-size: 1.15rem;
      color: #fff;
      letter-spacing: .01em;
    }

    .header-text .dept-name {
      font-size: .92rem;
      color: #a8c4e8;
      font-weight: 300;
      margin-top: 2px;
    }

    .header-text .address {
      font-size: .78rem;
      color: rgba(255,255,255,.45);
      margin-top: 1px;
    }

    .naac-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 5px;
      padding: 3px 10px;
      border-radius: 100px;
      background: linear-gradient(90deg, var(--accent-2), var(--accent));
      font-size: .72rem;
      font-weight: 500;
      color: #fff;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    /* ── Nav ───────────────────────────────────────────────────── */
    nav {
      position: relative;
      z-index: 10;
      background: rgba(26,63,114,.65);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 48px;
      max-width: 1400px;
      margin: auto;
    }

    nav ul {
      list-style: none;
      display: flex;
      align-items: center;
      gap: 0;
    }

    nav ul li { position: relative; }

    nav ul li > a {
      display: block;
      padding: 14px 20px;
      font-size: .88rem;
      font-weight: 500;
      color: rgba(255,255,255,.80);
      text-decoration: none;
      letter-spacing: .02em;
      transition: color .2s, background .2s;
    }

    nav ul li > a:hover,
    nav ul li > a:focus {
      color: #fff;
      background: rgba(255,255,255,.08);
    }

    /* dropdown */
    nav ul li ul {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      flex-direction: column;
      min-width: 260px;
      background: var(--navy-mid);
      border-radius: 0 0 var(--radius) var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      z-index: 100;
    }

    nav ul li:hover ul,
    nav ul li:focus-within ul { display: flex; }

    nav ul li ul li a {
      padding: 11px 20px;
      font-size: .84rem;
      border-bottom: 1px solid rgba(255,255,255,.05);
    }

    nav ul li ul li:last-child a { border-bottom: none; }

    .nav-login-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 22px;
      border-radius: 100px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: #fff !important;
      font-size: .84rem;
      font-weight: 500;
      text-decoration: none;
      transition: opacity .2s, transform .15s;
    }

    .nav-login-btn:hover { opacity: .9; transform: translateY(-1px); }

    /* ── Main content ──────────────────────────────────────────── */
    main {
      position: relative;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 48px 24px;
      gap: 40px;
    }

    /* ── Login card ────────────────────────────────────────────── */
    .login-card {
      background: var(--card-bg);
      border-radius: calc(var(--radius) * 1.5);
      box-shadow: var(--shadow-lg);
      padding: 44px 48px 36px;
      width: 100%;
      max-width: 420px;
      animation: slideUp .55s cubic-bezier(.22,1,.36,1) both;
    }

    .center-login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
    @@keyframes slideUp {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .card-eyebrow {
      font-size: .72rem;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 6px;
    }

    /*.card-title {
      font-family: 'Playfair Display', serif;
      font-size: 2rem;
      color: var(--navy);
      line-height: 1.15;
      margin-bottom: 28px;
    }*/

    .form-group { margin-bottom: 20px; }

    .form-group label {
      display: block;
      font-size: .8rem;
      font-weight: 500;
      letter-spacing: .04em;
      color: var(--text-muted);
      /*text-transform: uppercase;*/
      margin-bottom: 7px;
    }

    .input-wrap { position: relative; }

    .input-wrap svg {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      pointer-events: none;
      width: 18px;
      height: 18px;
    }

    .input-wrap input {
      width: 100%;
      padding: 12px 14px 12px 42px;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      font-family: 'DM Sans', sans-serif;
      font-size: .92rem;
      color: var(--navy);
      background: var(--off-white);
      outline: none;
      transition: border-color .2s, box-shadow .2s, background .2s;
      autocomplete: off;
    }

    .input-wrap input:focus {
      border-color: var(--navy-mid);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(26,63,114,.12);
    }

    .input-wrap input.invalid {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(232,33,74,.12);
    }

    .field-error {
      font-size: .76rem;
      color: var(--accent);
      margin-top: 5px;
      display: none;
    }

    .field-error.visible { display: block; }

    .submit-btn {
      width: 100%;
      padding: 13px;
      border: none;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy) 100%);
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: .95rem;
      font-weight: 500;
      letter-spacing: .04em;
      cursor: pointer;
      margin-top: 8px;
      position: relative;
      overflow: hidden;
      transition: opacity .2s, transform .15s, box-shadow .2s;
      box-shadow: 0 4px 18px rgba(11,42,82,.35);
    }

    .submit-btn:hover {
      opacity: .92;
      transform: translateY(-1px);
      box-shadow: 0 8px 28px rgba(11,42,82,.42);
    }

    .submit-btn:active { transform: translateY(0); }

    /* ripple */
    .submit-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
      opacity: 0;
      transition: opacity .3s;
    }

    .submit-btn:hover::after { opacity: .15; }

    .divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 22px 0 18px;
    }

    .divider hr {
      flex: 1;
      border: none;
      border-top: 1px solid var(--border);
    }

    .divider span {
      font-size: .75rem;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .forgot-links {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 14px;
      justify-content: center;
    }

    .forgot-links a {
      font-size: .78rem;
      color: var(--navy-mid);
      text-decoration: none;
      transition: color .2s;
      position: relative;
    }

    .forgot-links a::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 1px;
      background: var(--accent);
      transform: scaleX(0);
      transition: transform .2s;
    }

    .forgot-links a:hover { color: var(--accent); }
    .forgot-links a:hover::after { transform: scaleX(1); }

    /* ── Help Desk card ────────────────────────────────────────── */
    .helpdesk-card {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.13);
      border-radius: calc(var(--radius) * 1.5);
      backdrop-filter: blur(14px);
      padding: 32px 32px 28px;
      width: 100%;
      max-width: 300px;
      animation: slideUp .65s .1s cubic-bezier(.22,1,.36,1) both;
    }

    .helpdesk-contactus {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.13);
      border-radius: calc(var(--radius) * 1.5);
      backdrop-filter: blur(14px);
      padding: 32px 32px 28px;
      width: 100%;
      max-width: 550px;
      animation: slideUp .65s .1s cubic-bezier(.22,1,.36,1) both;
    }



    .helpdesk-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      color: #fff;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 0px solid rgba(255,255,255,.12);
    }

    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 16px;
    }

    .contact-item:last-child { margin-bottom: 0; }

    .contact-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .contact-icon.address  { background: rgba(232,33,74,.22); }
    .contact-icon.email  { background: rgba(232,33,74,.22); }
    .contact-icon.phone  { background: rgba(240,165,0,.22); }
    .contact-icon.landline { background: rgba(168,196,232,.18); }

    .contact-icon svg { width: 16px; height: 16px; }

    .contact-label {
      font-size: .72rem;
      color: rgba(255,255,255,.45);
      text-transform: uppercase;
      letter-spacing: .07em;
      margin-bottom: 2px;
    }

    .contact-value {
      font-size: .88rem;
      color: rgba(255,255,255,.9);
      font-weight: 500;
    }

    /* ── Footer ────────────────────────────────────────────────── */
    footer {
      position: relative;
      z-index: 10;
      background: rgba(7,26,54,.60);
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 14px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    footer span {
      font-size: .76rem;
      color: rgba(255,255,255,.40);
    }

    .footer-links {
      display: flex;
      gap: 18px;
      list-style: none;
      flex-wrap: wrap;
    }

    .footer-links a {
      font-size: .76rem;
      color: rgba(255,255,255,.40);
      text-decoration: none;
      transition: color .2s;
    }

    .footer-links a:hover { color: rgba(255,255,255,.75); }

    /* ── Responsive ────────────────────────────────────────────── */
    /*@@media (max-width: 900px) {
      header { padding: 16px 24px; flex-wrap: wrap; }
      .logo-group img { height: 56px; }
      .header-text .uni-name { font-size: 1rem; }
      .nav-inner { padding: 0 24px; }
      nav ul li > a { padding: 12px 14px; font-size: .82rem; }
      main { flex-direction: column; align-items: center; }
      .helpdesk-card { max-width: 420px; }
      footer { padding: 12px 24px; }
    }

    @@media (max-width: 560px) {
      .login-card { padding: 32px 24px 26px; }
      .header-text { display: none; }
    }*/
    .DashboardEmails {
        background-color: white;
        color: black;
        border: solid 1px #e6e6e6;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    }

    /* ===== FACULTY TAB STYLE (LIKE SECOND IMAGE) ===== */

.faculty-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 10px;
}

/* Normal Tabs */
.faculty-tabs a.create_button {
    background: #2f4864;
    color: #ffffff !important;
    padding: 8px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s ease;
    border: 1px solid rgba(255,255,255,0.15);
}

/* Hover Effect */
.faculty-tabs a.create_button:hover {
    background: #3e5d80;
    transform: translateY(-2px);
}

/* Highlighted Print Button */
.faculty-tabs a[href*="FacultyData"] {
    background: #f4b942;
    color: #1a1a1a !important;
    font-weight: 600;
    border: none;
}

/* Hover for Print */
.faculty-tabs a[href*="FacultyData"]:hover {
    background: #e0a92f;
}


 *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :root {
        --gold: #c9a94e;
        --gold-lt: #e8d49a;
        --navy: #0d1b3e;
        --navy-md: #162550;
        --navy-lt: #1e3268;
        --cream: #f8f5ef;
        --text: #1a1a2e;
        --muted: #6b7a99;
        --white: #ffffff;
        --radius: 14px;
    }

    /*body {
        font-family: 'DM Sans', sans-serif;
        background: var(--cream);
        color: var(--text);
        min-height: 100vh;
        padding: 3rem 2rem;
        background-image: radial-gradient(ellipse at 20% 10%, rgba(201,169,78,.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(13,27,62,.08) 0%, transparent 50%);
    }*/

    /* ── Page Header ── */
    .page-header {
        text-align: center;
        margin-bottom: 3rem;
        animation: fadeDown .7s ease both;
    }

        .page-header .eyebrow {
            display: inline-block;
            font-size: .7rem;
            font-weight: 500;
            letter-spacing: .25em;
            text-transform: uppercase;
            color: var(--gold);
            border: 1px solid var(--gold-lt);
            border-radius: 100px;
            padding: .3rem 1rem;
            margin-bottom: 1rem;
        }

        .page-header h1 {
            /*font-family: 'Playfair Display', serif;*/
            font-size: clamp(2rem, 5vw, 3.2rem);
            color: var(--navy);
            line-height: 1.1;
            letter-spacing: -.01em;
        }

        .page-header .divider {
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--gold), var(--gold-lt));
            border-radius: 10px;
            margin: 1rem auto 0;
        }

    /* ── Table ── */
    table {
        width: 100%;
        border-collapse: collapse;
    }

    /* Head */
    thead {
        background: linear-gradient(135deg, var(--navy) 0%, var(--navy-lt) 100%);
        color: var(--white);
    }

        thead tr:first-child th {
            /*padding: 1.4rem 1.6rem .6rem;*/
            /*font-family: 'Playfair Display', serif;*/
            font-size: .12rem;
            font-weight: 1000;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

            thead tr:first-child th.period-group {
                border-bottom: 1px solid rgba(201,169,78,.4);
                color: var(--gold-lt);
                text-align: center;
            }

        thead tr:last-child th {
            padding: 15px;
            font-size: .72rem;
            font-weight: 400;
            letter-spacing: .1em;
            text-transform: uppercase;
            /*color: rgba(255,255,255,.65);*/
            text-align: center;
        }

            thead tr:last-child th.sub {
                color: var(--gold-lt);
            }

    /* Body rows */
    tbody tr {
        border-bottom: 1px solid rgba(201,169,78,.1);
        transition: background .25s ease, transform .2s ease;
        animation: rowIn .5s ease both;
    }

        tbody tr:nth-child(1) {
            animation-delay: .30s;
        }

        tbody tr:nth-child(2) {
            animation-delay: .38s;
        }

        tbody tr:nth-child(3) {
            animation-delay: .46s;
        }

        tbody tr:nth-child(4) {
            animation-delay: .54s;
        }

        tbody tr:nth-child(5) {
            animation-delay: .62s;
        }

        tbody tr:last-child {
            border-bottom: none;
        }

        tbody tr:hover {
            background: linear-gradient(90deg, rgba(201,169,78,.07), rgba(201,169,78,.02));
            transform: translateX(4px);
        }

        tbody tr:nth-child(even) {
            background: rgba(13,27,62,.025);
        }

            tbody tr:nth-child(even):hover {
                background: rgba(201,169,78,.07);
            }

    tbody td {
        padding: 1.5rem 1.6rem;
        vertical-align: middle;
    }

    /* S.No badge */
    .sno {
        text-align: center;
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        font-size: 1.3rem;
        color: var(--gold);
    }

        .sno::after {
            content: '';
            display: block;
            width: 20px;
            height: 2px;
            background: var(--gold-lt);
            margin: 4px auto 0;
            border-radius: 2px;
            opacity: .6;
        }

    /* Director info */
    .director-name {
        font-family: 'Playfair Display', serif;
        font-size: 1.08rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: .35rem;
        letter-spacing: -.01em;
    }

    .director-dept {
        font-size: .8rem;
        font-weight: 400;
        color: var(--muted);
        display: flex;
        align-items: center;
        gap: .4rem;
    }

        .director-dept::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--gold);
            flex-shrink: 0;
            opacity: .7;
        }

    /* Period dates */
    .period-cell {
        text-align: center;
        font-size: .88rem;
        color: var(--navy-md);
        font-weight: 500;
        letter-spacing: .02em;
        white-space: nowrap;
    }

    .pill {
        display: inline-block;
        background: rgba(26,127,78,.12);
        color: #1a7f4e;
        border: 1px solid rgba(26,127,78,.3);
        border-radius: 100px;
        padding: .28rem .9rem;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    /* Photo */
    .photo-cell {
        text-align: center;
    }

    .photo-wrap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        padding: 3px;
        background: linear-gradient(135deg, var(--gold), var(--gold-lt));
    }

    .photo-placeholder {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--navy), var(--navy-lt));
        color: var(--gold-lt);
        font-family: 'Playfair Display', serif;
        font-size: .8rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: .05em;
        border: 3px solid var(--white);
    }

    /* ── Footer bar ── */
    .table-footer {
        background: linear-gradient(135deg, var(--navy) 0%, var(--navy-lt) 100%);
        color: rgba(255,255,255,.45);
        font-size: .74rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        padding: .85rem 1.6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 3px solid var(--gold);
    }

        .table-footer span {
            color: var(--gold-lt);
            font-weight: 600;
        }

    /* ── Animations ── */
    @@keyframes fadeDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @@keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @@keyframes rowIn {
        from {
            opacity: 0;
            transform: translateX(-14px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* ── Responsive ── */
    @@media (max-width: 700px) {
        body {
            padding: 2rem 1rem;
        }

        tbody td {
            padding: 1rem;
        }

        .director-name {
            font-size: .95rem;
        }

        .photo-placeholder {
            width: 48px;
            height: 48px;
            font-size: .68rem;
        }
    }