/* ===== content.html – Inline Styles ===== */

/* ===== Global Styles ===== */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Cairo', sans-serif; color: #333; line-height: 1.6; background-color: #f5f5f5; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
    a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
    button { font-family: 'Cairo', sans-serif; cursor: pointer; border: none; transition: all 0.3s ease; }

    /* ===== Header Styles (نفس الستايل في index.html) ===== */
    .top-header { background: linear-gradient(to right, #1a2f5a, #2a4a8a); color: white; padding: 10px 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
    .header-flex { display: flex; justify-content: space-between; align-items: center; }
    .logo-section-top { display: flex; align-items: center; gap: 15px; }
    .logo-item-top { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 5px 10px; }
    .logo-item-top img { height: 60px; width: auto; object-fit: contain; }
    .logo-text-top { font-size: 22px; font-weight: 900; color: white; }
    .main-nav ul { display: flex; list-style: none; gap: 15px; flex-wrap: wrap; }
    .main-nav a { color: white; font-weight: 600; font-size: 13px; }
    .main-nav a:hover { color: #ffd700; }

    .sub-header { background-color: white; padding: 10px 0; border-bottom: 2px solid #e0e0e0; }
    .sub-flex { display: flex; justify-content: space-between; align-items: center; }
    .logo-section-sub { display: flex; align-items: center; gap: 20px; }
    .logo-item-sub img { height: 50px; width: auto; object-fit: contain; }
    .sub-nav { display: flex; list-style: none; gap: 20px; flex-wrap: wrap; }
    .sub-nav a { color: #1a2f5a; font-weight: 700; font-size: 14px; }
    .sub-nav a:hover { color: #0066cc; }

    .news-bar { background: linear-gradient(to right, #1a2f5a, #0066cc); color: white; padding: 12px 0; display: flex; align-items: center; }
    .news-flex { display: flex; gap: 15px; align-items: center; width: 100%; }
    .news-btn { background-color: #7c3aed; color: white; padding: 8px 16px; border-radius: 5px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
    .news-ticker-wrapper { flex: 1; overflow: hidden; white-space: nowrap; position: relative; }
    .news-ticker-wrapper::after { content: ''; position: absolute; top: 0; right: 0; width: 70px; height: 100%; background: linear-gradient(to left, #0c52ad, transparent); pointer-events: none; z-index: 2; }
    .news-ticker { display: inline-block; white-space: nowrap; animation: scrollRTL 50s linear infinite; }
    @keyframes scrollRTL { 0% { transform: translateX(-100%); } 100% { transform: translateX(120%); } }
    .news-more-link { color: #ffd700; font-weight: 700; font-size: 13px; white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 6px; border: 1.5px solid rgba(255,215,0,0.5); border-radius: 5px; padding: 5px 12px; transition: all 0.3s ease; }
    .news-more-link:hover { background: rgba(255,215,0,0.15); border-color: #ffd700; }
    .news-more-link i { font-size: 11px; }
    /* ===== Content Title Bar ===== */
    .content-title-bar { background: linear-gradient(135deg, #1a2f5a, #0066cc); color: white; padding: 14px 22px; border-radius: 8px 8px 0 0; display: flex; align-items: center; gap: 12px; margin-bottom: 0; }
    .content-title-icon { font-size: 18px; color: #ffd700; flex-shrink: 0; }
    .content-title-text { font-size: 17px; font-weight: 700; margin: 0; color: white; }

    .main-nav-fixed { background-color: #1a2f5a; padding: 10px 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
    .nav-flex { display: flex; justify-content: center; }
    .nav-flex ul { display: flex; list-style: none; gap: 40px; }
    .nav-flex a { color: white; font-weight: 700; font-size: 18px; padding: 8px 20px; border-radius: 5px; }
    .nav-flex a:hover, .nav-flex a.active { background-color: #0066cc; }

    /* ===== Main Wrapper ===== */
    .main-wrapper { display: flex; max-width: 1400px; margin: 20px auto; gap: 20px; padding: 0 20px; }
    .sidebar { width: 300px; flex-shrink: 0; }
    .login-box, .profile-box { background: white; border-radius: 10px; padding: 25px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
    .login-box h3, .profile-box h3 { background-color: #1a2f5a; color: white; padding: 12px; border-radius: 5px; margin-bottom: 15px; font-size: 18px; text-align: center; }
    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
    .form-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-family: 'Cairo', sans-serif; }
    .login-btn { width: 100%; padding: 12px; background-color: #1a2f5a; color: white; border-radius: 5px; font-weight: 700; font-size: 16px; }
    .login-btn:hover { background-color: #0066cc; }

    .profile-box { display: none; text-align: center; animation: fadeIn 0.5s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    .student-img-container { width: 120px; height: 120px; margin: 0 auto 15px; border-radius: 50%; border: 4px solid #0066cc; overflow: hidden; background-color: #f0f0f0; }
    .student-img-container img { width: 100%; height: 100%; object-fit: cover; }
    .student-name { font-size: 20px; font-weight: 900; color: #1a2f5a; margin-bottom: 10px; }
    .student-details { background: #f9f9f9; padding: 15px; border-radius: 8px; margin-bottom: 15px; }
    .student-details div { font-size: 14px; margin-bottom: 5px; font-weight: 600; }
    .logout-btn { width: 100%; padding: 10px; background-color: #dc3545; color: white; border-radius: 5px; font-weight: 700; }

    /* ===== Main Content ===== */
    .main-content { flex: 1; background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); padding: 0; }
    .main-content > *:not(.content-title-bar) { padding: 40px; }
    .content-placeholder { border: 2px dashed #ddd; border-radius: 10px; height: 500px; display: flex; align-items: center; justify-content: center; color: #999; text-align: center; }

    @media (max-width: 768px) {
      .main-wrapper { flex-direction: column; }
      .sidebar { width: 100%; }
      .header-flex, .sub-flex { flex-direction: column; gap: 15px; text-align: center; }
      .logo-section-sub { justify-content: center; }
      .nav-flex ul { gap: 15px; }
      .nav-flex a { font-size: 14px; padding: 8px 10px; }
    }

#sigma-btn {
      position: fixed; bottom: 30px; left: 30px;
      width: 75px; height: 75px; border-radius: 50%;
      border: none; cursor: pointer; padding: 0; overflow: hidden;
      box-shadow: 0 6px 25px rgba(0,102,204,0.5);
      z-index: 9999; transition: transform 0.3s, box-shadow 0.3s;
      background: transparent;
    }
    #sigma-btn:hover { transform: scale(1.08); box-shadow: 0 10px 35px rgba(0,102,204,0.7); }
    #sigma-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
    #sigma-btn .sigma-ping {
      position: absolute; top: 3px; right: 3px;
      width: 14px; height: 14px; background: #00cc44;
      border-radius: 50%; border: 2px solid white;
      animation: sigmaPing 1.5s ease-in-out infinite;
    }
    @keyframes sigmaPing { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.35);opacity:.65} }
    #sigma-tip {
      position: fixed; bottom: 47px; left: 115px;
      background: #1a2f5a; color: white;
      padding: 7px 14px; border-radius: 20px;
      font-family: "Cairo", sans-serif; font-size: 13px; font-weight: 700;
      z-index: 9997; white-space: nowrap; pointer-events: none;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: opacity 0.5s;
    }
    #sigma-tip::after {
      content: ""; position: absolute; top: 50%; right: 100%;
      transform: translateY(-50%);
      border: 6px solid transparent; border-right-color: #1a2f5a;
    }
    #sigma-win {
      position: fixed; bottom: 120px; left: 30px;
      width: 370px; height: 530px;
      background: white; border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.22);
      z-index: 9998; display: none; flex-direction: column;
      overflow: hidden; border: 1px solid rgba(0,0,0,0.07);
    }
    #sigma-win.sopen { display: flex; animation: sUp 0.28s ease; }
    @keyframes sUp { from{opacity:0;transform:translateY(18px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }
    .sh { background: linear-gradient(135deg,#1a2f5a,#0066cc); color:white; padding:14px 17px; display:flex; align-items:center; gap:11px; flex-shrink:0; position:relative; overflow:hidden; }
    .sh-av { width:48px; height:48px; border-radius:50%; border:3px solid rgba(255,255,255,.35); overflow:hidden; flex-shrink:0; }
    .sh-av img { width:100%; height:100%; object-fit:cover; }
    .sh-name { font-size:16px; font-weight:900; font-family:"Cairo",sans-serif; }
    .sh-sub { font-size:11px; opacity:.85; font-family:"Cairo",sans-serif; display:flex; align-items:center; gap:4px; }
    .sh-sub::before { content:""; width:7px; height:7px; background:#00cc44; border-radius:50%; display:inline-block; }
    .sh-x { background:rgba(255,255,255,.15); border:none; color:white; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:background .2s; }
    .sh-x:hover { background:rgba(255,255,255,.3); }
    .sh-wm { position:absolute; bottom:-12px; right:-12px; width:90px; height:90px; opacity:.06; pointer-events:none; }
    .sh-wm img { width:100%; height:100%; object-fit:contain; filter:brightness(10); }
    .sm { flex:1; overflow-y:auto; padding:16px 13px; display:flex; flex-direction:column; gap:12px; background:#f7f9fc; }
    .sm::-webkit-scrollbar{width:3px} .sm::-webkit-scrollbar-thumb{background:#cdd5e0;border-radius:10px}
    .sr { display:flex; align-items:flex-end; gap:7px; }
    .sr.u { flex-direction:row-reverse; }
    .sav { width:30px; height:30px; border-radius:50%; overflow:hidden; flex-shrink:0; }
    .sav img { width:100%; height:100%; object-fit:cover; }
    .sav.ua { background:linear-gradient(135deg,#1a2f5a,#0066cc); display:flex; align-items:center; justify-content:center; color:white; font-size:12px; }
    .sb { max-width:77%; padding:9px 13px; border-radius:17px; font-size:13.5px; line-height:1.65; font-family:"Cairo",sans-serif; }
    .sb.b { background:white; color:#222; border-bottom-right-radius:3px; box-shadow:0 2px 7px rgba(0,0,0,.07); }
    .sb.u { background:linear-gradient(135deg,#1a2f5a,#0066cc); color:white; border-bottom-left-radius:3px; }
    .styp { display:flex; align-items:center; gap:4px; padding:11px 14px; background:white; border-radius:17px; border-bottom-right-radius:3px; box-shadow:0 2px 7px rgba(0,0,0,.07); }
    .sd { width:7px; height:7px; background:#0066cc; border-radius:50%; animation:sdot 1.4s ease-in-out infinite; }
    .sd:nth-child(2){animation-delay:.2s} .sd:nth-child(3){animation-delay:.4s}
    @keyframes sdot{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-5px);opacity:1}}
    .sqr { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
    .sqb { background:white; border:1.5px solid #0066cc; color:#0066cc; padding:4px 10px; border-radius:18px; font-size:12px; font-family:"Cairo",sans-serif; cursor:pointer; font-weight:600; transition:all .2s; }
    .sqb:hover { background:#0066cc; color:white; }
    .sia { padding:12px 14px; background:white; border-top:1px solid #eef0f5; display:flex; gap:8px; align-items:center; flex-shrink:0; }
    .si { flex:1; padding:9px 14px; border:1.5px solid #e0e7ef; border-radius:22px; font-family:"Cairo",sans-serif; font-size:13.5px; outline:none; background:#f7f9fc; direction:rtl; }
    .si:focus { border-color:#0066cc; background:white; }
    .ss { width:40px; height:40px; background:linear-gradient(135deg,#1a2f5a,#0066cc); color:white; border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:transform .2s; flex-shrink:0; }
    .ss:hover { transform:scale(1.1); }
    .ss:disabled { opacity:.45; cursor:not-allowed; transform:none; }
    @media(max-width:480px){ #sigma-win{width:calc(100vw - 20px);left:10px;bottom:100px;} #sigma-btn{bottom:15px;left:15px;} #sigma-tip{display:none!important;} }